Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Add next-auth v4 example #3982

Merged
merged 13 commits into from
Sep 3, 2024

Conversation

bharatkashyap
Copy link
Member

@bharatkashyap bharatkashyap added docs Improvements or additions to the documentation examples Relating to /examples labels Aug 22, 2024
return (
<SignInPage
providers={providers}
signIn={async (provider, formData, callbackUrl) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would separate this function from the rendering not to mix up the logic with the view so much, makes it more readable. Just personal preference though!

@apedroferreira
Copy link
Member

Oh just one more thing does it have to use the Next.js pages router? I thought most examples should just use the app router as it's the most recent one.
Still, the example looks great!

@apedroferreira
Copy link
Member

Also, how can I run the example in my development workflow? pnpm install seems to install in the whole project scope of the monorepo.
If we don't have instructions for doing that with a Toolpad Core example I guess we could add them later separately?
Also not sure if that means that Core and Studio examples should be separated in different folders.

@bharatkashyap
Copy link
Member Author

Oh just one more thing does it have to use the Next.js pages router? I thought most examples should just use the app router as it's the most recent one. Still, the example looks great!

I used the pages router assuming most people using next-auth@4 would be interested in maintaining older apps they created with the pages router, but I can add a version with the app router as well. Perhaps we can introduce the choice to choose between next-auth versions in the CLI, as well. Wdyt @Janpot?

@bharatkashyap
Copy link
Member Author

Also, how can I run the example in my development workflow? pnpm install seems to install in the whole project scope of the monorepo. If we don't have instructions for doing that with a Toolpad Core example I guess we could add them later separately? Also not sure if that means that Core and Studio examples should be separated in different folders.

For testing during development, the method would be akin to testing the playground apps, i.e.,

  • modifying the @toolpad/core dependency in the example to workspace/*
  • adding the example to the workspace in pnpm-workspace.yml, like examples/<example-name>
  • run the project in a separate process through pnpm --filter @toolpad/core dev
  • running pnpm dedupe && pnpm --filter examples/<example-name> dev to run the example

Don't know if this merits space in the contributing instructions?

@apedroferreira
Copy link
Member

Oh just one more thing does it have to use the Next.js pages router? I thought most examples should just use the app router as it's the most recent one. Still, the example looks great!

I used the pages router assuming most people using next-auth@4 would be interested in maintaining older apps they created with the pages router, but I can add a version with the app router as well. Perhaps we can introduce the choice to choose between next-auth versions in the CLI, as well. Wdyt @Janpot?

That's a good point, feel free to stick with that option then, I guess we can't really know for sure what's best for now.

@apedroferreira
Copy link
Member

Also, how can I run the example in my development workflow? pnpm install seems to install in the whole project scope of the monorepo. If we don't have instructions for doing that with a Toolpad Core example I guess we could add them later separately? Also not sure if that means that Core and Studio examples should be separated in different folders.

For testing during development, the method would be akin to testing the playground apps, i.e.,

  • modifying the @toolpad/core dependency in the example to workspace/*
  • adding the example to the workspace in pnpm-workspace.yml, like examples/<example-name>
  • run the project in a separate process through pnpm --filter @toolpad/core dev
  • running pnpm dedupe && pnpm --filter examples/<example-name> dev to run the example

Don't know if this merits space in the contributing instructions?

Probably not super urgent but the current instructions there are about Toolpad Studio only.
We should probably cover all of this in a single more generic section now.

@bharatkashyap
Copy link
Member Author

Updated to add instructions to run the playground apps (and examples) for Toolpad Core.

I've explored integrating next-auth v4 with the app router, and the chief problem is that they do not provide a server-side signIn equivalent function; the recommended approach is to use your own, wherein there continue to be multiple issues: nextauthjs/next-auth#45

CONTRIBUTING.md Outdated
pnpm dev
```

### Test changes to Toolpad Core on a live application
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't this basically the same information as the section above?

CONTRIBUTING.md Outdated
pnpm --filter playground-nextjs dev
```

You should now be able to test changes to Toolpad Core on a live application. Follow similar steps to run apps in the `examples` folder after adding them to the workspace in `pnpm-workspace.yaml`.
Copy link
Member

@apedroferreira apedroferreira Aug 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the part that should be more step by step and covered in a single section for both Core and Studio in my opinion.
But it's not really related with this PR, we can just create an issue!

@apedroferreira
Copy link
Member

apedroferreira commented Aug 29, 2024

I've explored integrating next-auth v4 with the app router, and the chief problem is that they do not provide a server-side signIn equivalent function; the recommended approach is to use your own, wherein there continue to be multiple issues: nextauthjs/next-auth#45

Sticking with the pages router should be cool!

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 1, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 2, 2024
@bharatkashyap bharatkashyap merged commit 92d12d5 into mui:master Sep 3, 2024
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation examples Relating to /examples
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Auth.js v4 example
2 participants