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

chore(docs): update migrating-to-v5.mdx client component example copy #10747

Merged
merged 21 commits into from May 19, 2024
Merged
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
1f4dc8c
Update migrating-to-v5.mdx
chriseling Apr 28, 2024
f4d9f2d
Merge branch 'main' into chriseling-patch-1
ndom91 Apr 28, 2024
a202152
Update migrating-to-v5.mdx
chriseling Apr 28, 2024
19774fb
Merge branch 'main' into chriseling-patch-1
ndom91 Apr 29, 2024
2a5f1c7
Merge branch 'main' into chriseling-patch-1
ndom91 Apr 29, 2024
4cd996a
Merge branch 'main' into chriseling-patch-1
ndom91 Apr 29, 2024
b98583e
Merge branch 'chriseling-patch-1' of github.com:chriseling/next-auth …
chriseling May 6, 2024
322036e
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
4435082
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
382467e
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
329206f
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
bb98d6d
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
46f65cf
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
9ffe5fd
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
a06deb5
Merge branch 'main' into chriseling-patch-1
ndom91 May 19, 2024
a1b62c0
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
8f2e029
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
e7bd26b
Merge branch 'main' into chriseling-patch-1
ndom91 May 19, 2024
cf104bd
Update docs/pages/getting-started/migrating-to-v5.mdx
ndom91 May 19, 2024
f5a7c4e
Merge branch 'main' into chriseling-patch-1
ndom91 May 19, 2024
23f6eb5
Merge branch 'main' into chriseling-patch-1
ndom91 May 19, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
40 changes: 32 additions & 8 deletions docs/pages/getting-started/migrating-to-v5.mdx
Expand Up @@ -123,13 +123,23 @@ export default async function Page() {
</Tabs.Tab>
<Tabs.Tab>

Imports from `next-auth/react` are now marked with the [`"use client"`](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive) directive. Therefore, they can be used in client components just like they were used in previous versions.
Imports from `next-auth/react` are now marked with the [`"use client"`](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive) directive. Therefore, they can be used in client components just like they were used in previous versions. Don't forget, client components that attempt to access the session via context will need to be wrapped in a `<SessionProvider />`.

<Callout type="warning">
If you have previously used `getSession()` or other imports from
`next-auth/react` server-side, you'll have to refactor them to use `auth()` as
shown above instead.
</Callout>
```ts filename="components/clientComponent.tsx"
'use client';

import { useSession, SessionProvider } from 'next-auth/react';

const ClientComponent = () => {
const session = useSession();

return (
<SessionProvider>
<p>Welcome {session?.user?.name}</p>
</SessionProvider>
)
}
```

</Tabs.Tab>
<Tabs.Tab>
Expand Down Expand Up @@ -273,7 +283,12 @@ import authConfig from "./auth.config"

const prisma = new PrismaClient()

export const { handlers, auth } = NextAuth({
export const {
auth,
handlers: { GET, POST },
signIn,
signOut,
} = NextAuth({
adapter: PrismaAdapter(prisma),
session: { strategy: "jwt" },
...authConfig,
Expand All @@ -285,7 +300,16 @@ export const { handlers, auth } = NextAuth({
```ts filename="middleware.ts" {1} /NextAuth/
import authConfig from "./auth.config"
import NextAuth from "next-auth"
export const { auth: middleware } = NextAuth(authConfig)

ndom91 marked this conversation as resolved.
Show resolved Hide resolved
// Use only one of the two middleware options below
// 1. Use middleware directly
// export const { auth: middleware } = NextAuth(authConfig)

// 2. Wrapped middleware option
const { auth } = NextAuth(authConfig);
export default auth(async function middleware(req: NextRequest) {
// Your custom middleware logic goes here
}
```

The above is just an example. **The main idea**, is to separate the part of the configuration that is edge-compatible from the rest, and only import the edge-compatible part in Middleware/Edge pages/routes. You can read more about this workaround in the [Prisma docs](/getting-started/adapters/prisma), for example.
Expand Down