AuthKit

How to use AuthKit's hosted UI or build your own frontend with the headless User Management APIs

Examples

There are two ways to use AuthKit and this repository contains examples for both:

Using AuthKit's hosted UI This is the fastest way to add authentication to your app with AuthKit and WorkOS User Management. It includes a fully themeable hosted UI that handles all of your authentication flows. When you're ready to go to production you can point it to a custom domain (auth.yourapp.com) to match your application.
Using your own custom UI Use all of the features of AuthKit, but build out the UI yourself in your own codebase by integrating directly with the headless WorkOS User Management APIs. Your authentication UI will be self-hosted in your application.

You will need a WorkOS account.

Install dependencies with npm install or yarn install
Set up your Environment variables by signing into your WorkOS dashboard, navigate to API Keys and copy the Client ID and the Secret Key (API Key). Rename the .env.local.example file to .env.local and supply your Client ID and Secret Key.
```
WORKOS_CLIENT_ID="<your Client ID>"
WORKOS_API_KEY="<your Secret Key>"
```

Configure redirects in your WorkOS dashboard, navigate to Redirects and add the following urls:

http://localhost:3000/using-your-own-ui/sign-in/google-oauth/callback

http://localhost:3000/using-your-own-ui/sign-in/microsoft-oauth/callback

http://localhost:3000/using-your-own-ui/sign-in/github-oauth/callback

http://localhost:3000/using-your-own-ui/sign-in/sso/callback

http://localhost:3000/using-hosted-authkit/basic/callback

http://localhost:3000/using-hosted-authkit/with-session/callback

http://localhost:3000/using-hosted-authkit/with-nextjs/callback

Run the example with npm run dev or yarn dev and navigate to http://localhost:3000

How to use AuthKit's hosted UI or build your own frontend with the headless User Management APIs

There are two ways to use AuthKit and this repository contains examples for both:

Using AuthKit's hosted UI This is the fastest way to add authentication to your app with AuthKit and WorkOS User Management. It includes a fully themeable hosted UI that handles all of your authentication flows. When you're ready to go to production you can point it to a custom domain (auth.yourapp.com) to match your application.
Using your own custom UI Use all of the features of AuthKit, but build out the UI yourself in your own codebase by integrating directly with the headless WorkOS User Management APIs. Your authentication UI will be self-hosted in your application.

You will need a WorkOS account.

Install dependencies with npm install or yarn install
Set up your Environment variables by signing into your WorkOS dashboard, navigate to API Keys and copy the Client ID and the Secret Key (API Key). Rename the .env.local.example file to .env.local and supply your Client ID and Secret Key.
```
WORKOS_CLIENT_ID="<your Client ID>"
WORKOS_API_KEY="<your Secret Key>"
```

Configure redirects in your WorkOS dashboard, navigate to Redirects and add the following urls:

http://localhost:3000/using-your-own-ui/sign-in/google-oauth/callback

http://localhost:3000/using-your-own-ui/sign-in/microsoft-oauth/callback

http://localhost:3000/using-your-own-ui/sign-in/github-oauth/callback

http://localhost:3000/using-your-own-ui/sign-in/sso/callback

http://localhost:3000/using-hosted-authkit/basic/callback

http://localhost:3000/using-hosted-authkit/with-session/callback

http://localhost:3000/using-hosted-authkit/with-nextjs/callback

Run the example with npm run dev or yarn dev and navigate to http://localhost:3000