From 2068384a0ea2681920b50e32f2dc6d517d9a62cb Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Fri, 7 Jul 2023 09:05:36 +0200 Subject: [PATCH] docs(nextjs): yarn, remove redundant description (#5764) * docs: yarn, remove redundant description * remove pkce * rm pkce from b2b demo --- docs/docs/examples/login/nextjs-b2b.md | 2 +- docs/docs/examples/login/nextjs.md | 13 +++++-------- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/docs/docs/examples/login/nextjs-b2b.md b/docs/docs/examples/login/nextjs-b2b.md index 4f64cc683..7dbd33f1f 100644 --- a/docs/docs/examples/login/nextjs-b2b.md +++ b/docs/docs/examples/login/nextjs-b2b.md @@ -35,7 +35,7 @@ Open the Console (`https://{YourDomain}.zitadel.cloud/ui/console/projects`) and Then on the project detail page click on new application and enter a name for this app. Let's call this one `portal-web`. Select `Web`, continue, `CODE`, then enter `http://localhost:3000/api/auth/callback/zitadel` for the redirect, and `http://localhost:3000` for the post redirect. Then press on `create`. -Because the requests from your NextJS application to ZITADEL are made on the server side, you can safely select `CODE`. With this you still get a secret which is then usable alongside PKCE. Your secret never gets exposed on the browser since it is kept in your NextJS server. +Because the requests from your NextJS application to ZITADEL are made on the server side, you can safely select `CODE`. You will get a secret at the end of the stepper. With NextAuth your secret never gets exposed on the browser since it is kept in your NextJS server. Copy the "Resource Id" of the project `Portal` as you will need this in your environment configuration file later. diff --git a/docs/docs/examples/login/nextjs.md b/docs/docs/examples/login/nextjs.md index cde4823cb..5362a3391 100644 --- a/docs/docs/examples/login/nextjs.md +++ b/docs/docs/examples/login/nextjs.md @@ -19,7 +19,7 @@ yarn install then to run the app: ```bash -npm run dev +yarn dev ``` then open [http://localhost:3000](http://localhost:3000) with your browser to see the result. @@ -28,10 +28,11 @@ then open [http://localhost:3000](http://localhost:3000) with your browser to se Before we can start building our application, we have to do a few configuration steps in ZITADEL Console. You will need to provide some information about your app. + Navigate to your Project, then add a new application at the top of the page. Select Web application type and continue. -We recommend you use [Authorization Code](/apis/openidoauth/grant-types#authorization-code) in combination with [Proof Key for Code Exchange (PKCE)](/apis/openidoauth/grant-types#proof-key-for-code-exchange) for all web applications. -As the requests from your application to ZITADEL are made on NextJS serverside, you can select `CODE` in the next step. This makes sure you still get a secret which is then used in combination with PKCE. Note that the secret never gets exposed on the browser and is therefore kept in a confidential environment. +We use [Authorization Code](/apis/openidoauth/grant-types#authorization-code)for our NextJS application. +Select `CODE` in the next step. This makes sure you still get a secret. Note that the secret never gets exposed on the browser and is therefore kept in a confidential environment. ![Create app in console](/img/nextjs/app-create.png) @@ -135,15 +136,11 @@ ZitadelProvider({ ... ``` -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. - +To be able to connect to ZITADEL, make sure to add `http://localhost:3000/api/auth/callback/zitadel` as redirect url to your app. For simplicity reasons we set the default to the one that next-auth provides us. You'll be able to change the redirect later if you want to. Hit Create, then in the detail view of your application make sure to enable dev mode. Dev mode ensures that you can start an auth flow from a non https endpoint for testing. -> Note that we get a clientId but no clientSecret because it is not needed for our authentication flow. - Now go to Token settings and check the checkbox for **User Info inside ID Token** to get your users name directly on authentication. ### Environment