docs(nextjs): yarn, remove redundant description (#5764)

* docs: yarn, remove redundant description

* remove pkce

* rm pkce from b2b demo
This commit is contained in:
Max Peintner 2023-07-07 09:05:36 +02:00 committed by GitHub
parent 9b768003b7
commit 2068384a0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 9 deletions

View File

@ -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.

View File

@ -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