{"id":21096804,"url":"https://github.com/stytchauth/stytch-passkey-nextjs-example-app","last_synced_at":"2026-05-20T02:52:48.298Z","repository":{"id":207257462,"uuid":"718752711","full_name":"stytchauth/stytch-passkey-nextjs-example-app","owner":"stytchauth","description":"SurveyAmp themed Passkeys example app. ","archived":false,"fork":false,"pushed_at":"2024-07-29T17:41:19.000Z","size":478,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-21T02:09:11.803Z","etag":null,"topics":["authentication","nextjs","passkeys"],"latest_commit_sha":null,"homepage":"https://stytch-nextjs-passkey-demo.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stytchauth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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":"2023-11-14T18:20:42.000Z","updated_at":"2024-07-29T17:41:21.000Z","dependencies_parsed_at":"2023-11-14T22:26:05.379Z","dependency_job_id":"4a904723-2455-4dbd-affb-91a70cf7e914","html_url":"https://github.com/stytchauth/stytch-passkey-nextjs-example-app","commit_stats":null,"previous_names":["stytchauth/passkey-nextjs-example-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stytchauth%2Fstytch-passkey-nextjs-example-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stytchauth%2Fstytch-passkey-nextjs-example-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stytchauth%2Fstytch-passkey-nextjs-example-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stytchauth%2Fstytch-passkey-nextjs-example-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stytchauth","download_url":"https://codeload.github.com/stytchauth/stytch-passkey-nextjs-example-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243538296,"owners_count":20307148,"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":["authentication","nextjs","passkeys"],"created_at":"2024-11-19T22:44:00.680Z","updated_at":"2026-05-20T02:52:48.262Z","avatar_url":"https://github.com/stytchauth.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stytch Passkey Example in Next.js\n\n\u003cp\u003e\n    \u003cimg width=\"767\" alt=\"Screenshot 2023-11-14 at 12 56 49 PM\" src=\"https://github.com/stytchauth/stytch-passkey-nextjs-example-app/assets/111321901/f3f2dc67-7e06-4dec-8fde-743fa7f65af8\"\u003e\n\u003c/p\u003e\n\u003cp\u003e\n    \u003cimg width=\"1333\" alt=\"Screenshot 2023-11-14 at 12 57 31 PM\" src=\"https://github.com/stytchauth/stytch-passkey-nextjs-example-app/assets/111321901/4f87d23c-1f2f-47c2-92e5-84794f9f40a3\"\u003e\n\u003c/p\u003e\n\n## Overview\n\nThis example application demonstrates how one may use Stytch's Passkey authentication within a Next.js application. The application features a sign-up and login flow powered by OTP sms/email and passkeys.\n\nThis project utilizes Stytch's [NextJS SDK](https://www.npmjs.com/package/@stytch/nextjs) to power authentication. All authentication logic lives within the NextJS SDK UI components.\n\nThis project was bootstrapped with [Create Next App](https://nextjs.org/docs/api-reference/create-next-app).\n\n## Set up\n\nFollow the steps below to get this application fully functional and running using your own Stytch credentials.\n\n### In the Stytch Dashboard\n\n1. Create a [Stytch](https://stytch.com/) account. Within the signup flow select **B2C Authentication** as the authentication type you are interested in. Once your account is set up a Project called \"My first project\" will be automatically created for you.\n\n   - If you signed up for Stytch in the past then your default Project is likely a Consumer type Project. You can confirm this in your [Project settings](https://stytch.com/dashboard/project-settings).\n\n2. Navigate to [SDK Configuration](https://stytch.com/dashboard/sdk-configuration) and click \"Enable SDK\". Enter the domain you will be running this application on (e.g. `localhost:3000`).\n   Click the toggle to enable \"Email Passcodes (OTP)\", \"SMS Passcodes (OTP)\", and \"Passkeys\".\n\n3. Finally, navigate to [API Keys](https://stytch.com/dashboard/api-keys). You will need the `project_id`, `secret`, and `public_token` values found on this page later on.\n\n### On your machine\n\nIn your terminal clone the project and install dependencies:\n\n```bash\ngit clone [https://github.com/stytchauth/stytch-b2b-nextjs-example.git](https://github.com/stytchauth/stytch-passkey-nextjs-example-app.git)\ncd stytch-passkey-nextjs-example-app\nnpm i\n```\n\nNext, create `.env.local` file by running the command below which copies the contents of `.env.template`.\n\n```bash\ncp .env.template .env.local\n```\n\nOpen `.env.local` in the text editor of your choice, and set the environment variables using the `project_id`, `secret`, and `public_token` found on [API Keys](https://stytch.com/dashboard/api-keys). Leave the `NEXT_PUBLIC_STYTCH_PROJECT_ENV` value as `test`.\n\n```\n# This is what a completed .env.local file will look like\nNEXT_PUBLIC_STYTCH_PROJECT_ENV=test\nSTYTCH_PROJECT_ID=project-test-00000000-0000-1234-abcd-abcdef1234\nSTYTCH_SECRET=secret-test-12345678901234567890abcdabcd\nNEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=public-token-test-abc123-abcde-1234-0987-0000-abcd1234\n```\n\n## Running locally\n\nAfter completing all the setup steps above the application can be run with the command:\n\n```bash\nnpm run dev\n```\n\nThe application will be available at [`http://localhost:3000`](http://localhost:3000).\n\n## Get help and join the community\n\n#### :speech_balloon: Stytch community Slack\n\nJoin the discussion, ask questions, and suggest new features in our [Slack community](https://stytch.com/docs/resources/support/overview)!\n\n#### :question: Need support?\n\nCheck out the [Stytch Forum](https://forum.stytch.com/) or email us at [support@stytch.com](mailto:support@stytch.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstytchauth%2Fstytch-passkey-nextjs-example-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstytchauth%2Fstytch-passkey-nextjs-example-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstytchauth%2Fstytch-passkey-nextjs-example-app/lists"}