React Context

The kit comes with a handy React context located in the src/LoginContext.tsx for authentication so that you can easily access the details about the logged user, state and much more. Here is how you can use the context in multiple use cases.

Provider

It is required to wrap the App component with the LoginProvider component. This is done already in the src/app/dashboard/layout.tsx file and src/app/login/layout.tsx file so that any component from these pages can access the context.

Flow

The context works in the following way:

1. The LoginProvider component is wrapped around the App component.
2. Uses NextAuth SessionProvider to get the session details for the logged in user.
3. Fetches more details about the logged in user from the /api/login route.
4. Sets the information in the context.

Dashboard

The kit is designed such a way that all the pages under /dashboard/ are protected and only accessible to the logged in users. It shows a nice loading screen while it performs the above mentioned flow. If the user is not logged in, it redirects to the login page.

Context

The context is used to store the details about the logged user, state and much more. You can access the context in any component by using the useContext hook.