{"id":27443359,"url":"https://github.com/descope-sample-apps/nextjs-hackathon-template","last_synced_at":"2025-04-15T01:53:22.873Z","repository":{"id":182409926,"uuid":"660404458","full_name":"descope-sample-apps/nextjs-hackathon-template","owner":"descope-sample-apps","description":"Next.js Template using NextAuth and Descope for authentication","archived":false,"fork":false,"pushed_at":"2024-11-24T05:34:31.000Z","size":17317,"stargazers_count":36,"open_issues_count":8,"forks_count":2,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-15T01:53:12.241Z","etag":null,"topics":["authjs","descope","hackathon","next","nextauth","nextjs"],"latest_commit_sha":null,"homepage":"https://nextjs-hackathon-template.descope.com/","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/descope-sample-apps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-06-30T00:01:07.000Z","updated_at":"2025-03-10T08:05:12.000Z","dependencies_parsed_at":"2024-05-22T21:48:24.427Z","dependency_job_id":null,"html_url":"https://github.com/descope-sample-apps/nextjs-hackathon-template","commit_stats":null,"previous_names":["descope/nextjs-hackathon-template","descope-sample-apps/nextjs-hackathon-template"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope-sample-apps%2Fnextjs-hackathon-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope-sample-apps%2Fnextjs-hackathon-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope-sample-apps%2Fnextjs-hackathon-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope-sample-apps%2Fnextjs-hackathon-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/descope-sample-apps","download_url":"https://codeload.github.com/descope-sample-apps/nextjs-hackathon-template/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248991540,"owners_count":21194894,"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":["authjs","descope","hackathon","next","nextauth","nextjs"],"created_at":"2025-04-15T01:53:22.352Z","updated_at":"2025-04-15T01:53:22.847Z","avatar_url":"https://github.com/descope-sample-apps.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js Hackathon Template\n\n### [Template Features](#-the-hackathon-template-comes-with-the-following-full-stack-features) · [Tech Stack](#-made-with) · [Setup](#-setup-local-testing) · [Descope](#-descope) · [Template Data](#-template-data) · [Airtable Setup](#-airtable-setup) · [Deploy](#-deploy) · [Gallery](#-gallery)\n\n## 🪐 The Hackathon template comes with the following full-stack features:\n\n- [Descope](https://descope.com) NextAuth authentication 🔐 \u003cbr/\u003e\n- Protected pages \u0026 API routes with NextAuth. \u003cbr/\u003e\n- The latest Next.js app router, server \u0026 client components. \u003cbr/\u003e\n- Fully customizable Home screen which features an About, Speakers, Sponsors, and FAQ section. \u003cbr/\u003e\n- A dedicated Team page to showcase all contributors. \u003cbr/\u003e\n- A Dashboard page for Hackers to complete onboarding forms, acceptance status, and hackathon announcements. \u003cbr/\u003e\n- Airtable backend for hackers to signup and view hackathon details. \u003cbr/\u003e\n- Fully responsive UI (mobile, tablet, computer). \u003cbr/\u003e\n\n## ✨ Made with...\n\n- [Descope](https://www.descope.com/)\n- [NextAuth](https://next-auth.js.org/)\n- [Flowbite](https://flowbite.com/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Airtable](https://www.airtable.com/) (Optional)\n\n## ⚙️ Setup: Local Testing\n\n1. In the root directory of the project, copy the `.env.example` to `.env` by running `cp .env.example .env` and include the following:\n\n```\nNEXTAUTH_SECRET=\"YOUR_NEXTAUTH_SECRET\"\nNEXTAUTH_URL=\"WHERE SERVER IS HOSTED (e.g. http://localhost:3000)\"\n\nDESCOPE_PROJECT_ID=\"YOUR_DESCOPE_PROJECT_ID\"\nDESCOPE_ACCESS_KEY=\"YOUR_DESCOPE_ACCESS_KEY\"\nNEXT_PRIVATE_SECRET_TOKEN=\"YOUR_SECRET_TOKEN\"\n```\n\n- `DESCOPE_PROJECT_ID` - can be found in your Descope's account under the [Project page](https://app.descope.com/settings/project)\n- `DESCOPE_ACCESS_KEY` - can be generated in your Descope's account under the [Access Keys page](https://app.descope.com/accesskeys)\n- `NEXTAUTH_SECRET` and `NEXT_PRIVATE_SECRET_TOKEN` can be generated by the following command in your terminal (do not use the same generated value for both):\n\n```\n$ openssl rand -base64 32\n```\n\n\u003e **_NOTE:_** The `NEXT_PRIVATE_SECRET_TOKEN` is used to authenticate the request in the API. It is passed as a parameter in the fetch URL.\n\n2. Setup SSO\n\n- To enable SSO and add Descope as an Identity Provider (IdP), we need to add our flow hosting URL:\n\n```\nhttps://auth.descope.io/\u003cYOUR_DESCOPE_PROJECT_ID\u003e\n```\n\n- Navigate to Descope Project --\u003e Authentication methods --\u003e Identity Provider:\n\n\u003cimg src=\"./readme-assets/sso.png\" /\u003e\n\n3. Installation\n\n- `npm install`\n- `npm run dev`\n- Open `http://localhost:3000` in your browser\n\n## 🔑 Descope\n\nTo use Descope, we can implement a custom provider. \u003cbr /\u003e\n\nOut NextAuth options can be found in `/app/_utils/options.ts`.\n\nIn our `authOptions` we have our custom Descope provider we have attributes such as your `clientID` (Descope project id), `clientSecret` (Descope access key), and `wellKnown` set to Descope's OpenID Connect configuration which contains our authorization endpoints and authentication data.\n\n```\nimport { NextAuthOptions } from \"next-auth\"\n\n\nexport const authOptions: NextAuthOptions = {\n  providers: [\n    {\n      id: \"descope\",\n      name: \"Descope\",\n      type: \"oauth\",\n      wellKnown: `https://api.descope.com/${process.env.DESCOPE_PROJECT_ID}/.well-known/openid-configuration`,\n      authorization: {\n        params: { scope: \"openid email profile descope.custom_claims\" },\n      },\n      idToken: true,\n      clientId: process.env.DESCOPE_PROJECT_ID,\n      clientSecret: process.env.DESCOPE_ACCESS_KEY,\n      checks: [\"pkce\", \"state\"],\n      profile(profile, tokens) {\n        return {\n          id: profile.sub,\n          name: profile.name,\n          email: profile.email,\n          image: profile.picture,\n          idToken: tokens.id_token,\n          ...tokens,\n        };\n      },\n    },\n  ],\n  callbacks: {\n    async jwt({ token, account }) {\n      if (account?.id_token) {\n        token.idToken = account.id_token;\n      }\n      return token;\n    },\n    async session({ session, token, user }) {\n      // @ts-ignore\n      session.idToken = token.idToken;\n      return session;\n    },\n  },\n}\n```\n\n\u003e **Note:** The purpose of the callbacks at the end, are to be able to fetch the id_token and include it in the [NextAuth Session](https://next-auth.js.org/configuration/nextjs#getserversession) object. You will be able to access custom_claims also through this `id_token` using [getSession()](https://next-auth.js.org/getting-started/client#getsession) on the client side.\n\nThen in our `/app/api/auth/[...nextauth]/route.ts` we pass our authOptions and intialize NextAuth.\n\n```\nimport NextAuth from \"next-auth/next\";\nimport { authOptions } from \"../../../_utils/options\";\n\n\nconst handler = NextAuth(authOptions)\n\n\nexport { handler as GET, handler as POST }\n```\n\n## 👾 Template Data\n\nThe template data can be found in the `./app/_template_data`\n\nAll the template data can be customized and found in the following files. \u003cbr /\u003e\n\nTo see our template data in action make your way to `app/page.tsx`. \u003cbr /\u003e\nIn the `page.tsx` we import the different template data and the components from our `_components` folder. We pass in\nour template data into these components as props that then render the data!\n\n## 📦 Airtable Setup\n\n\u003e **_NOTE:_** This step is Optional!\n\nTo learn more about creating a form and setting up Airtable as a database go to [Airtable.md](Airtable.md)!\n\n## 🚀 Deploy\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdescope%2Fnextjs-hackathon-template\u0026env=NEXTAUTH_URL,AIRTABLE_FORM_EMBED,AIRTABLE_TABLE_NAME,AIRTABLE_BASE,AIRTABLE_PERSONAL_ACCESS_TOKEN,DESCOPE_ACCESS_KEY,DESCOPE_PROJECT_ID,NEXTAUTH_SECRET)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdescope-sample-apps%2Fnextjs-hackathon-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdescope-sample-apps%2Fnextjs-hackathon-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdescope-sample-apps%2Fnextjs-hackathon-template/lists"}