{"id":22009720,"url":"https://github.com/zitadel/zitadel-nextjs","last_synced_at":"2025-05-06T18:18:00.844Z","repository":{"id":61586214,"uuid":"552776407","full_name":"zitadel/zitadel-nextjs","owner":"zitadel","description":"This is our ZITADEL [Next.js](https://nextjs.org/) template. If shows how to authenticate as a user and retrieve user information from the OIDC endpoint.","archived":false,"fork":false,"pushed_at":"2024-03-01T07:11:52.000Z","size":99,"stargazers_count":36,"open_issues_count":4,"forks_count":17,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-06T18:17:56.404Z","etag":null,"topics":["examples","zitadel"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zitadel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-17T08:00:32.000Z","updated_at":"2025-04-11T11:32:12.000Z","dependencies_parsed_at":"2024-11-30T02:10:37.026Z","dependency_job_id":"c24de93c-0cb2-414a-a30c-1ffc4b8e1c8c","html_url":"https://github.com/zitadel/zitadel-nextjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zitadel%2Fzitadel-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zitadel","download_url":"https://codeload.github.com/zitadel/zitadel-nextjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252741483,"owners_count":21797030,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["examples","zitadel"],"created_at":"2024-11-30T02:10:34.175Z","updated_at":"2025-05-06T18:18:00.796Z","avatar_url":"https://github.com/zitadel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"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.\n\n## Deploy your own\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fzitadel%2Fzitadel-nextjs\u0026env=NEXTAUTH_URL,ZITADEL_CLIENT_ID,ZITADEL_CLIENT_SECRET,ZITADEL_ISSUER,NEXTAUTH_SECRET\u0026envDescription=Navigate%20to%20your%20ZITADEL%20cloud%20application%20and%20copy%20the%20required%20information.%20Provide%20a%20random%20value%20for%20ZITADEL_CLIENT_SECRET%20and%20NEXTAUTH_SECRET\u0026project-name=zitadel-nextjs\u0026repo-name=zitadel-nextjs\u0026redirect-url=https%3A%2F%2Fzitadel.cloud)\n\n## Getting Started\n\nFirst, to install the dependencies run:\n\n```bash\nyarn install\n```\n\nthen create a file `.env` in the root of the project and add the following keys to it.\nYou can find your Issuer Url on the application detail page in console.\n\n```\nNEXTAUTH_URL=http://localhost:3000\nZITADEL_ISSUER=[yourIssuerUrl]\nZITADEL_CLIENT_ID=[yourClientId]\nZITADEL_CLIENT_SECRET=[randomvalue]\nNEXTAUTH_SECRET=[randomvalue]\n```\n\nnext-auth requires a secret for all providers, so just define a random value here.\nthen open [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n# Configuration\n\nNextAuth.js exposes a REST API which is used by your client.\nTo setup your configuration, create a file called [...nextauth].tsx in `pages/api/auth`.\nYou can directly import our ZITADEL provider from [next-auth](https://next-auth.js.org/providers/zitadel).\n\n```ts\nimport NextAuth from 'next-auth';\nimport ZitadelProvider from 'next-auth/providers/zitadel';\n\nexport default NextAuth({\n  providers: [\n    ZitadelProvider({\n      issuer: process.env.ZITADEL_ISSUER,\n      clientId: process.env.ZITADEL_CLIENT_ID,\n      clientSecret: process.env.ZITADEL_CLIENT_SECRET,\n    }),\n  ],\n});\n```\n\nYou can overwrite the default callbacks too, just append them to the ZITADEL provider.\n\n```ts\n...\nZitadelProvider({\n    issuer: process.env.ZITADEL_ISSUER,\n    clientId: process.env.ZITADEL_CLIENT_ID,\n    clientSecret: process.env.ZITADEL_CLIENT_SECRET,\n    async profile(profile) {\n        return {\n          id: profile.sub,\n          name: profile.name,\n          firstName: profile.given_name,\n          lastName: profile.family_name,\n          email: profile.email,\n          loginName: profile.preferred_username,\n          image: profile.picture,\n        };\n    },\n}),\n...\n```\n\nWe recommend using the Authentication Code flow secured by PKCE for the Authentication flow.\nTo be able to connect to ZITADEL, navigate to your Console Projects, create or select an existing project and add your app selecting WEB, then CODE, and then add `http://localhost:3000/api/auth/callback/zitadel` as redirect url to your app.\n\nFor 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.\n\nHit 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.\n\n\u003e Once you have created the application, you will see a dialog providing the clientId and clientSecret.\n\nCopy the secret as it will not be shown again.\n\nNow go to Token settings and check the checkbox for **User Info inside ID Token** to get your users name directly on authentication.\n\n# User interface\n\nNow we can start editing the homepage by modifying `pages/index.tsx`.\nAdd 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.\nNote 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.\n\n```ts\nimport { signIn, signOut, useSession } from 'next-auth/client';\n\nexport default function Page() {\n    const { data: session } = useSession();\n    ...\n    {!session \u0026\u0026 \u003c\u003e\n        Not signed in \u003cbr /\u003e\n        \u003cbutton onClick={() =\u003e signIn('zitadel', { callbackUrl: 'http://localhost:3000/profile' })}\u003e\n            Sign in\n        \u003c/button\u003e\n    \u003c/\u003e}\n    {session \u0026\u0026 \u003c\u003e\n        Signed in as {session.user.email} \u003cbr /\u003e\n        \u003cbutton onClick={() =\u003e signOut()}\u003eSign out\u003c/button\u003e\n    \u003c/\u003e}\n    ...\n}\n```\n\n### Session state\n\nTo 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`.\nTake a loot at the template `_app.tsx`.\n\n```ts\nimport { SessionProvider } from 'next-auth/react';\n\nfunction MyApp({ Component, pageProps }) {\n  return (\n    \u003cSessionProvider session={pageProps.session}\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/SessionProvider\u003e\n  );\n}\n\nexport default MyApp;\n```\n\nLast thing: create a `profile.tsx` in /pages which renders the callback page.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fzitadel-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzitadel%2Fzitadel-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzitadel%2Fzitadel-nextjs/lists"}