Next.js Hackathon Template

Template Features · Tech Stack · Setup · Descope · Template Data · Airtable Setup · Deploy · Gallery

🪐 The Hackathon template comes with the following full-stack features:

Descope NextAuth authentication 🔐
Protected pages & API routes with NextAuth.
The latest Next.js app router, server & client components.
Fully customizable Home screen which features an About, Speakers, Sponsors, and FAQ section.
A dedicated Team page to showcase all contributors.
A Dashboard page for Hackers to complete onboarding forms, acceptance status, and hackathon announcements.
Airtable backend for hackers to signup and view hackathon details.
Fully responsive UI (mobile, tablet, computer).

✨ Made with...

⚙️ Setup: Local Testing

In the root directory of the project, copy the .env.example to .env by running cp .env.example .env and include the following:

NEXTAUTH_SECRET="YOUR_NEXTAUTH_SECRET"
NEXTAUTH_URL="WHERE SERVER IS HOSTED (e.g. http://localhost:3000)"

DESCOPE_PROJECT_ID="YOUR_DESCOPE_PROJECT_ID"
DESCOPE_ACCESS_KEY="YOUR_DESCOPE_ACCESS_KEY"
DESCOPE_DISCOVERY_URL="YOUR_DESCOPE_DISCOVERY_URL"

DESCOPE_PROJECT_ID - can be found in your Descope's account under the Project page
DESCOPE_ACCESS_KEY - can be generated in your Descope's account under the Access Keys page
DESCOPE_DISCOVERY_URL: can be found in your Descope's account under the Applications page and editing the active application
NEXTAUTH_SECRET and SECRET_TOKEN can be generated by the following command in your terminal (do not use the same generated value for both):

$ openssl rand -base64 32

NOTE: The SECRET_TOKEN is used to authenticate the request in the API. It is passed as a parameter in the fetch URL.

Setup SSO

To enable SSO and add Descope as an Identity Provider (IdP), we need to add our flow hosting URL:

https://auth.descope.io/<YOUR_DESCOPE_PROJECT_ID>

Navigate to Descope Project --> Authentication methods --> Identity Provider:

Installation

npm install
npm run dev
Open http://localhost:3000 in your browser

🔑 Descope

To use Descope, we can implement a custom provider.

Out NextAuth options can be found in /pages/_utils/options.ts.

In 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.

import { NextAuthOptions } from "next-auth"


export const authOptions: NextAuthOptions = {
  providers: [
    {
      id: "descope",
      name: "Descope",
      type: "oauth",
      wellKnown: `https://api.descope.com/${process.env.DESCOPE_PROJECT_ID}/.well-known/openid-configuration`,
      authorization: { params: { scope: "openid email profile" } },
      idToken: true,
      clientId: process.env.DESCOPE_PROJECT_ID, 
      clientSecret: process.env.DESCOPE_ACCESS_KEY,
      checks: ["pkce", "state"],
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture,
        }
      },
    },
  ]
}

Then in our /pages/api/auth/[...nextauth].ts we pass our authOptions and intialize NextAuth.

import NextAuth from "next-auth/next";
import { authOptions } from "../../_utils/options";


export default NextAuth(authOptions)

👾 Template Data

The template data can be found in the ./pages/_template_data

All the template data can be customized and found in the following files.

To see our template data in action make your way to pages/index.tsx.
In the page.tsx we import the different template data and the components from our _components folder. We pass in our template data into these components as props that then render the data!

📦 Airtable Setup

NOTE: This step is Optional!

To learn more about creating a form and setting up Airtable as a database go to Airtable.md!

🚀 Deploy

⚠️ Issue Reporting

For any issues or suggestions, feel free to open an issue in the GitHub repository.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

descope-sample-apps/nextjs-hackathon-template-pages