docs: nextjs example changes (#5438)

updates nextjs example docs
This commit is contained in:
Max Peintner 2023-03-15 09:10:46 +01:00 committed by GitHub
parent 0d832ef67f
commit 636ebc07a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -63,7 +63,7 @@ You can directly import the ZITADEL provider from [next-auth](https://next-auth.
https://github.com/zitadel/zitadel-nextjs/blob/main/pages/api/auth/%5B...nextauth%5D.tsx
```
You can overwrite the default callbacks, just append them to the ZITADEL provider.
You can overwrite the profile callback, just append it to the ZITADEL provider.
```ts
...
@ -86,6 +86,55 @@ ZitadelProvider({
...
```
If you want to request a refresh token, you can overwrite the JWT callback and add the `offline_access` scope.
```ts
...
async function refreshAccessToken(token: JWT): Promise<JWT> {
try {
const issuer = await Issuer.discover(process.env.ZITADEL_ISSUER ?? '');
const client = new issuer.Client({
client_id: process.env.ZITADEL_CLIENT_ID || '',
token_endpoint_auth_method: 'none',
});
const { refresh_token, access_token, expires_at } = await client.refresh(token.refreshToken as string);
return {
...token,
accessToken: access_token,
expiresAt: (expires_at ?? 0) * 1000,
refreshToken: refresh_token, // Fall back to old refresh token
};
} catch (error) {
console.error('Error during refreshAccessToken', error);
return {
...token,
error: 'RefreshAccessTokenError',
};
}
}
...
ZitadelProvider({
issuer: process.env.ZITADEL_ISSUER,
clientId: process.env.ZITADEL_CLIENT_ID,
clientSecret: process.env.ZITADEL_CLIENT_SECRET,
async profile(profile) {
return {
id: profile.sub,
name: profile.name,
firstName: profile.given_name,
lastName: profile.family_name,
email: profile.email,
loginName: profile.preferred_username,
image: profile.picture,
};
},
}),
...
```
We recommend using the Authentication Code flow secured by PKCE for the Authentication flow.
To be able to connect to ZITADEL, navigate to your Console Projects, create or select an existing project and add your app selecting WEB, then PKCE, and then add `http://localhost:3000/api/auth/callback/zitadel` as redirect url to your app.
@ -121,6 +170,17 @@ https://github.com/zitadel/zitadel-nextjs/blob/main/components/profile.tsx#L4-L3
Note that the signIn method requires the id of our provider which is in our case `zitadel`.
### Userinfo API
To show user information, you can either use the idToken data, or call the userinfo endpoint.
In this example, we call the userinfo endpoint to load user data.
To implement the API, you can create a file under the `pages/api` folder and call it `userinfo.ts`.
The file should look like the following.
```ts reference
https://github.com/zitadel/zitadel-nextjs/blob/main/pages/api/userinfo.ts
```
### Session state
To allow session state to be shared between pages - which improves performance, reduces network traffic and avoids component state changes while rendering - you can use the NextAuth.js Provider in `/pages/_app.tsx`.