Want to set up a SaaS app dashboard really fast with user auth? This is the tutorial you’ve been looking for.

This is an app starter built using Next.js, AuthKit, and shadcn/ui. The dashboard used in this example is a copy-paste of the dashboard example on the shadcn/ui site with the auth and user data added in.

This demo adds authentication to a Next.js site using the app directory. The UI is built using shadcn/ui.

To get started, clone the app:

# clone the repo
gh repo clone learnwithjason/workos-authkit -- -b start

# move into the directory
cd workos-authkit/

# install dependencies
npm i

Next, get the required environment variables:

WORKOS_CLIENT_ID=client_...
WORKOS_API_KEY=sk_...
WORKOS_REDIRECT_URI=http://localhost:3000/callback
JWT_SECRET_KEY=...

To get these values:

• Head to dashboard.workos.com and head to the API Keys tab
• Copy the Client ID from the top as WORKOS_CLIENT_ID
• Click "+ Create Key" to generate a new API key to use as WORKOS_API_KEY
• Leave the WORKOS_REDIRECT_URI set to http://localhost:3000/callback — this must match one of the callbacks in your WorkOS dashboard Redirects tab
• Set JWT_SECRET_KEY to any value — I used https://www.uuidgenerator.net/

Finally, start up local development to see the app.

npm run dev

Open http://localhost:3000