[docs] Add SignInPage Vite + React Router example
#4335
Conversation
|
|
||
| ### 4. (Optional) Set up authentication | ||
|
|
||
| You can use the `SignInPage` component to add authentication along with an external authentication provider of your choice. The following code demonstrates the code required to set up authentication with a mock provider. |
There was a problem hiding this comment.
| You can use the `SignInPage` component to add authentication along with an external authentication provider of your choice. The following code demonstrates the code required to set up authentication with a mock provider. | |
| You can use the `SignInPage` component to add authentication along with an external authentication provider of your choice. The following code demonstrates how to set up authentication with a mock provider. |
|
|
||
| You can use the `SignInPage` component to add authentication along with an external authentication provider of your choice. The following code demonstrates the code required to set up authentication with a mock provider. | ||
|
|
||
| #### a. Define a `SessionContext` to hold the authentication session |
There was a problem hiding this comment.
We're supposed to already provide a hook for this, right? And why are we not just passing a session to the AppProvider like you did in the example?
There was a problem hiding this comment.
I'm going to modify this example to use useSession and an actual authentication service in a follow up. I've updated the wording in this PR to reflect that the SessionContext is being defined to serve as a mock authentication provider. Also, missed writing the step around passing the session to the AppProvider, great catch.
| } | ||
| ``` | ||
|
|
||
| #### b. Protect routes inside the dashboard layout |
There was a problem hiding this comment.
Maybe we can add this step at the end only, as it makes more sense to create the sign in page first.
There was a problem hiding this comment.
Also technically we should be able to protect any pages, not just the pages with the dashboard layout, I guess...
But because useSession probably needs the AppProvider to wrap it this would probably add another level to the React Router configuration, which starts to get kind of cumbersome...
So I think this should be fine for now. Eventually we might even have a better, automatic way to configure protected pages/routes.
There was a problem hiding this comment.
Agree, I've reflected that the user is free to protect any other page or layout using a similar process
| ``` | ||
|
|
||
| :::info | ||
| For a full working example, see the [Toolpad Core Vite app with React Router and authentication example](https://github.com/mui/toolpad/tree/master/examples/core-vite-auth) |
There was a problem hiding this comment.
Are the 2 different examples a bit redundant now? Maybe we should have just one, to match what we do with Next.js
There was a problem hiding this comment.
Agreed, we could potentially remove the original example as a follow up to this
| { | ||
| title: 'Vite with React Router and authentication', | ||
| description: | ||
| 'This app shows you to how to get started using Toolpad Core with Vite, React Router and any external authentication provider', |
There was a problem hiding this comment.
Depending on what feedback we get from users eventually we can replace this example with actual external auth providers like Auth0 and Firebase. But as a generic first step this is probably fine for now.
There was a problem hiding this comment.
Agreed, for the follow up to modify this example to use Auth0/Firebase/Supabase and the useSession hook
|
Oh, also you might want to call the new example |
Closes #4326
https://deploy-preview-4335--mui-toolpad-docs.netlify.app/toolpad/core/introduction/integration/#4-optional-set-up-authentication
SignInPagedocs page