mirror of
https://github.com/zitadel/zitadel.git
synced 2025-01-05 22:52:46 +00:00
parent
0d832ef67f
commit
636ebc07a9
@ -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`.
|
||||
|
Loading…
x
Reference in New Issue
Block a user