diff --git a/.github/workflows/zitadel.yml b/.github/workflows/zitadel.yml
index 476959d51..b37d71cd1 100644
--- a/.github/workflows/zitadel.yml
+++ b/.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
diff --git a/docs/docs/quickstarts/nextjs.md b/docs/docs/quickstarts/nextjs.md
new file mode 100644
index 000000000..7ea3d5958
--- /dev/null
+++ b/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
+
+ >}
+ {session && <>
+ Signed in as {session.user.email}
+
+ >}
+ ...
+}
+```
+
+### 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
+
+ ;
+}
+
+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.
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 60aa71a31..02ad1d6f7 100644
--- a/docs/sidebars.js
+++ b/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/organizations',
- 'guides/usage/projects',
- 'guides/usage/oauth-recommended-flows',
- 'guides/usage/serviceusers',
- 'guides/usage/access-zitadel-apis',
- 'guides/usage/identity-brokering',
+ 'guides/usage/get-started',
+ 'guides/usage/organizations',
+ 'guides/usage/projects',
+ 'guides/usage/oauth-recommended-flows',
+ 'guides/usage/serviceusers',
+ 'guides/usage/access-zitadel-apis',
+ 'guides/usage/identity-brokering',
],
},
- {
+ {
+ type: 'category',
+ label: 'Installation',
+ collapsed: false,
+ items: [
+ {
type: 'category',
- label: 'Installation',
- collapsed: false,
+ label: 'CAOS Managed',
+ collapsed: true,
items: [
- {
- type: 'category',
- 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'
- ],
- },
+ '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'
+ ],
+ },
+ ],
+ }
],
apis: [
'apis/introduction',
@@ -132,11 +132,11 @@ module.exports = {
label: 'OpenID Connect & OAuth',
collapsed: true,
items: [
- 'apis/openidoauth/endpoints',
- 'apis/openidoauth/scopes',
- 'apis/openidoauth/claims',
- 'apis/openidoauth/authn-methods',
- 'apis/openidoauth/grant-types'
+ 'apis/openidoauth/endpoints',
+ 'apis/openidoauth/scopes',
+ 'apis/openidoauth/claims',
+ 'apis/openidoauth/authn-methods',
+ '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'
],
}