From ef593e2e05c9415db76f88b20c8263de0d2b250a Mon Sep 17 00:00:00 2001 From: Lebogang Phoshoko Date: Tue, 16 Dec 2025 15:53:28 +0200 Subject: [PATCH] docs: update broken reference links (#10888) # Which Problems Are Solved - Broken links that the NextJs frontend quickstart guide uses to refer to the files in the example application. # How the Problems Are Solved - Links are updated - The mentioned file paths are adapted to match the existing file structure # Additional Changes # Additional Context - [NextJs Frontend Quickstart Guide](https://zitadel.com/docs/examples/login/nextjs) - [Example Application](https://github.com/zitadel/zitadel-nextjs) Co-authored-by: Wim Van Laer --- docs/docs/examples/login/nextjs.md | 37 +++++++++++++++--------------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/docs/docs/examples/login/nextjs.md b/docs/docs/examples/login/nextjs.md index 9d237b5b6..c0dce21be 100644 --- a/docs/docs/examples/login/nextjs.md +++ b/docs/docs/examples/login/nextjs.md @@ -41,7 +41,7 @@ Select `CODE` in the next step. This makes sure you still get a secret. Note tha With the Redirect URIs field, you tell ZITADEL where it is allowed to redirect users to after authentication. For development, you can set dev mode to `true` to enable insecure HTTP and redirect to a `localhost` URI. -> If you are following along with the [example](https://github.com/zitadel/zitadel-angular), set dev mode to `true` and the Redirect URIs to `http://localhost:3000/api/auth/callback/zitadel`. +> If you are following along with the [example](https://github.com/zitadel/zitadel-nextjs), set dev mode to `true` and the Redirect URIs to `http://localhost:3000/api/auth/callback/zitadel`. If you want to redirect the users back to a route on your application after they have logged out, add an optional redirect in the Post Logout URIs field. @@ -58,17 +58,17 @@ Now that you have your web application configured on the ZITADEL side, you can g ### Configuration NextAuth.js exposes a REST API which is used by your client. -To setup your configuration, create a file called [...nextauth].tsx in `pages/api/auth`. +To setup your configuration, create a file called `src/lib/auth.ts`. You can directly import the ZITADEL provider from [next-auth](https://next-auth.js.org/providers/zitadel). ```ts reference -https://github.com/zitadel/zitadel-nextjs/blob/main/pages/api/auth/%5B...nextauth%5D.tsx +https://github.com/zitadel/example-auth-nextjs/blob/main/src/lib/auth.ts ``` You can overwrite the profile callback, just append it to the ZITADEL provider. ```ts -... +// ... ZitadelProvider({ issuer: process.env.ZITADEL_ISSUER, clientId: process.env.ZITADEL_CLIENT_ID, @@ -85,13 +85,13 @@ 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 { try { const issuer = await Issuer.discover(process.env.ZITADEL_ISSUER ?? ''); @@ -117,7 +117,8 @@ async function refreshAccessToken(token: JWT): Promise { }; } } -... + +// ... ZitadelProvider({ issuer: process.env.ZITADEL_ISSUER, clientId: process.env.ZITADEL_CLIENT_ID, @@ -134,7 +135,7 @@ ZitadelProvider({ }; }, }), -... +// ... ``` To be able to connect to ZITADEL, make sure to add `http://localhost:3000/api/auth/callback/zitadel` as redirect url to your app. @@ -150,20 +151,20 @@ Create a file `.env` in the root of the project and add the following keys to it You can find your Issuer Url on the application detail page in console. ```env reference -https://github.com/zitadel/zitadel-nextjs/blob/main/.env +https://github.com/zitadel/zitadel-nextjs/blob/main/.env.example ``` next-auth requires a secret for all providers, so just define a random value here. ### User interface -Now we can start editing the homepage by modifying `pages/index.tsx`. On the homepage, your authenticated user or a Signin button is shown. +Now we can start editing the homepage by modifying `src/app/profile/page.tsx`. On the homepage, your authenticated user or a Signin button is shown. Add the following component to render the UI elements: ```ts reference -https://github.com/zitadel/zitadel-nextjs/blob/main/components/profile.tsx#L4-L38 +https://github.com/zitadel/example-auth-nextjs/blob/main/src/app/profile/page.tsx ``` Note that the signIn method requires the id of our provider which is in our case `zitadel`. @@ -172,24 +173,24 @@ Note that the signIn method requires the id of our provider which is in our case 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`. +To implement the API, you can create a file under the `src/app/api/userinfo/` folder and call it `route.ts`. The file should look like the following. ```ts reference -https://github.com/zitadel/zitadel-nextjs/blob/main/pages/api/userinfo.ts +https://github.com/zitadel/zitadel-nextjs/blob/main/src/app/api/userinfo/route.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`. -Take a loot at the template `_app.tsx`. +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 `src/app/providers.tsx`. +Take a look at the template `providers.tsx`. ```ts reference -https://github.com/zitadel/zitadel-nextjs/blob/main/pages/_app.tsx +https://github.com/zitadel/zitadel-nextjs/blob/main/src/app/providers.tsx ``` -Last thing: create a `profile.tsx` in /pages which renders the callback page. +Last thing: create a `page.tsx` in `src/app/profile/` which renders the callback page. ```ts reference -https://github.com/zitadel/zitadel-nextjs/blob/main/pages/profile.tsx +https://github.com/zitadel/zitadel-nextjs/blob/main/src/app/profile/page.tsx ```