{props.title}
{props.children}
{/* Profile dropdown */}
{navigation.map((item) => (
{item.name}
))}
{NAV_ITEMS.map((item) => (
{item.title}
))}
{props.title}
{props.children}
{/* Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" */}
Dashboard
Team
Projects
Calendar
Tom Cook
tom@example.com
loading...
;
}
return (
<>
-
{usersQuery?.data &&
usersQuery.data.map((user) => {
return (
- {user.email} {user.name} {user.emailVerified ? "Verified" : "Not Verified"} ); })}
| Name | Status | Providers | |
|---|---|---|---|
| {user.name} | {user.emailVerified ? "Verified" : "Not Verified"} |
{user?.accounts && user?.accounts?.length > 0 ? (
user.accounts.map((account) => {
return {account.provider} ; }) ) : (credentials )} |
Welcome to the PlanetScale Next.js Starter App
Get started by creating an administrative account to setup.
Admin Sign In
Hello, {`${session.user.name ?? session.user.email}`} This is a protected route. You can see it because you're logged in.
This page is protected using the useSession hook.
Either way works.
But in this case the session is not available on the first render.
This page uses the useSession() React Hook.
The useSession() React Hook is easy to use and allows pages to render very quickly.
The advantage of this approach is that session state is shared between pages by using the Provider in _app.js so that navigation between pages using useSession() is very fast.
The disadvantage of useSession() is that it requires client side JavaScript.
This page is protected using the useSession hook.
Either way works.
But in this case the session is not available on the first render.
*/}Welcome to the PlanetScale Next.js Starter App!
This is an example site to demonstrate how to use{" "} NextAuth.js for authentication with PlanetScale and Prisma.
You can find how to get started{" "} here.
Hello, {`${session.user.name ?? session.user.email}`} This is a protected route. You can see it because you're logged in.
This page is protected using Page.auth = true
Either way works.
But in this case the session is available on the first render.
This page uses the universal getSession() method in getServerSideProps().
Using getSession() in getServerSideProps() is the recommended approach if you need to support Server Side Rendering with authentication.
The advantage of Server Side Rendering is this page does not require client side JavaScript.
The disadvantage of Server Side Rendering is that this page is slower to render.
This page is protected using the useSession hook.
Either way works.
But in this case the session is not available on the first render.
Sign In
Sign in with an existing account, or create new account.
Or with
{providers.map((provider) => {
return (
);
})}
Access Denied
to see a secret message
Hello, {`${session.user.name ?? session.user.email}`} You can see this because you're logged in.
{withSessionQuery?.data &&This example shows usage with React Query and protected api routes.
{withSessionQuery.data}
}