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 tohttp://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