docs: add nextjs to quickstarts (#2084)

* docs: update angular template link

* docs: add nextjs to quickstarts

* add to navigation

* nextjs is a framework

* add title

* reenable cache

Co-authored-by: Florian Forster <florian@caos.ch>

.github/workflows/zitadel.yml

@@ -124,7 +124,7 @@ jobs:
           context: .
           file: ./build/console/Dockerfile
           platforms: linux/amd64
-          #cache-from: type=gha,scope=${{ github.workflow }}
+          cache-from: type=gha,scope=${{ github.workflow }}
           cache-to: type=gha,scope=${{ github.workflow }},mode=max
           outputs: type=local,dest=/tmp/zitadel-console
       - uses: actions/upload-artifact@v2

docs/docs/quickstarts/nextjs.md

@@ -0,0 +1,159 @@
+---
+title: Next.js
+---
+
+This is our Zitadel [Next.js](https://nextjs.org/) template. It shows how to authenticate as a user and retrieve user information from the OIDC endpoint.
+
+> The template code is part of our zitadel-example repo. Take a look [here](https://github.com/caos/zitadel-examples/tree/main/nextjs).
+
+## Getting Started
+
+First, we start by creating a new NextJS app with `npx create-next-app`, which sets up everything automatically for you. To create a project, run:
+
+```bash
+npx create-next-app --typescript
+# or
+yarn create next-app --typescript
+```
+
+# Install Authentication library
+
+To keep the template as easy as possible we use [next-auth](https://next-auth.js.org/) as our main authentication library. To install, run:
+
+```bash
+npm i next-auth
+# or
+yarn add next-auth
+```
+
+To run the app, type:
+
+```bash
+npm run dev
+```
+
+then open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+# 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`.
+
+```ts
+import NextAuth from 'next-auth';
+
+export const ZITADEL = {
+    id: "zitadel",
+    name: "zitadel",
+    type: "oauth",
+    version: "2.0",
+    scope: "openid profile email",
+    params: { response_type: "code", grant_type: "authorization_code" },
+    authorizationParams: { grant_type: "authorization_code", response_type: "code" },
+    accessTokenUrl: "https://api.zitadel.dev/oauth/v2/token",
+    requestTokenUrl: "https://api.zitadel.dev/oauth/v2/token",
+    authorizationUrl: "https://accounts.zitadel.dev/oauth/v2/authorize",
+    profileUrl: "https://api.zitadel.dev/oauth/v2/userinfo",
+    protection: "pkce",
+    async profile(profile, tokens) {
+        console.log(profile, tokens);
+        return {
+            id: profile.sub,
+            name: profile.name,
+            email: profile.email,
+            image: profile.picture
+        };
+    },
+    clientId: process.env.ZITADEL_CLIENT_ID,
+    session: {
+        jwt: true,
+    },
+};
+
+export default NextAuth({
+    providers: [
+        ZITADEL
+    ],
+});
+```
+
+Replace the endpoints `https://api.zitadel.dev/` with `https://api.zitadel.ch/` if your using a ZITADEL CLOUD tier or your own endpoint if your using a self hosted ENTERPRISE tier respectively.
+
+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](https://console.zitadel.ch/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. 
+
+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.
+
+## Environment
+
+Create a file `.env` in the root of the project and add the following keys to it.
+
+```
+NEXTAUTH_URL=http://localhost:3000
+ZITADEL_CLIENT_ID=[yourClientId]
+```
+
+# User interface
+
+Now we can start editing the homepage by modifying `pages/index.tsx`.
+Add this snippet your file. This code gets your auth session from next-auth, renders a Logout button if your authenticated or shows a Signup button if your not.
+Note that signIn method requires the id of the provider we provided earlier, and provides a possibilty to add a callback url, Auth Next will redirect you to the specified route if logged in successfully.
+
+```ts
+import { signIn, signOut, useSession } from 'next-auth/client';
+
+export default function Page() {
+    const [session, loading] = useSession();
+    ...
+    {!session && <>
+        Not signed in <br />
+        <button onClick={() => signIn('zitadel', { callbackUrl: 'http://localhost:3000/profile' })}>
+            Sign in
+        </button>
+    </>}
+    {session && <>
+        Signed in as {session.user.email} <br />
+        <button onClick={() => signOut()}>Sign out</button>
+    </>}
+    ...
+}
+```
+
+### 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`.
+
+```ts
+import { Provider } from 'next-auth/client';
+
+function MyApp({ Component, pageProps }) {
+    return <Provider
+        session={pageProps.session} >
+        <Component {...pageProps} />
+    </Provider>;
+}
+
+export default MyApp;
+```
+
+Last thing: create a `profile.tsx` in /pages which renders the callback page.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

docs/sidebars.js

@@ -4,7 +4,7 @@ module.exports = {
     {
       type: 'category',
       label: 'User',
-      items: ['manuals/user-register', 'manuals/user-login', 'manuals/user-password', 'manuals/user-factors', 'manuals/user-email', 'manuals/user-phone', 'manuals/user-social-login', ],
+      items: ['manuals/user-register', 'manuals/user-login', 'manuals/user-password', 'manuals/user-factors', 'manuals/user-email', 'manuals/user-phone', 'manuals/user-social-login',],
       collapsed: false,
     },
     {
@@ -31,7 +31,7 @@ module.exports = {
     {
       type: 'category',
       label: 'Frameworks',
-      items: ['quickstarts/flutter'],
+      items: ['quickstarts/flutter', 'quickstarts/nextjs'],
       collapsed: false,
     },
     {
@@ -48,41 +48,41 @@ module.exports = {
       label: 'Get to know ZITADEL',
       collapsed: false,
       items: [
-          'guides/usage/get-started',
+        'guides/usage/get-started',
-          'guides/usage/organizations',
+        'guides/usage/organizations',
-          'guides/usage/projects',
+        'guides/usage/projects',
-          'guides/usage/oauth-recommended-flows',
+        'guides/usage/oauth-recommended-flows',
-          'guides/usage/serviceusers',
+        'guides/usage/serviceusers',
-          'guides/usage/access-zitadel-apis',
+        'guides/usage/access-zitadel-apis',
-          'guides/usage/identity-brokering',
+        'guides/usage/identity-brokering',
       ],
     },
-      {
+    {
+      type: 'category',
+      label: 'Installation',
+      collapsed: false,
+      items: [
+        {
           type: 'category',
-          label: 'Installation',
+          label: 'CAOS Managed',
-          collapsed: false,
+          collapsed: true,
           items: [
-              {
+            'guides/installation/shared-cloud',
-                  type: 'category',
+            'guides/installation/managed-dedicated-instance'
-                  label: 'CAOS Managed',
-                  collapsed: true,
-                  items: [
-                      'guides/installation/shared-cloud',
-                      'guides/installation/managed-dedicated-instance'
-                  ],
-              },
-              {
-                  type: 'category',
-                  label: 'Self Managed',
-                  collapsed: true,
-                  items: [
-                      'guides/installation/crd',
-                      'guides/installation/gitops',
-                      'guides/installation/orbos'
-                  ],
-              },
           ],
-      }
+        },
+        {
+          type: 'category',
+          label: 'Self Managed',
+          collapsed: true,
+          items: [
+            'guides/installation/crd',
+            'guides/installation/gitops',
+            'guides/installation/orbos'
+          ],
+        },
+      ],
+    }
   ],
   apis: [
     'apis/introduction',
@@ -132,11 +132,11 @@ module.exports = {
       label: 'OpenID Connect & OAuth',
       collapsed: true,
       items: [
-          'apis/openidoauth/endpoints',
+        'apis/openidoauth/endpoints',
-          'apis/openidoauth/scopes',
+        'apis/openidoauth/scopes',
-          'apis/openidoauth/claims',
+        'apis/openidoauth/claims',
-          'apis/openidoauth/authn-methods',
+        'apis/openidoauth/authn-methods',
-          'apis/openidoauth/grant-types'
+        'apis/openidoauth/grant-types'
       ],
     },
   ],
@@ -174,7 +174,7 @@ module.exports = {
       collapsed: false,
       items: [
         'legal/privacy-policy',
-        'legal/acceptable-use-policy', 
+        'legal/acceptable-use-policy',
         'legal/rate-limit-policy'
       ],
     }