Demo OS

A Standard Demo App Template for showcasing WorkOS's key features

Explore the WorkOS docs ↗

Examples

This repository has examples of the following:

• SSO: Initiate SSO with an organization ID or connection ID

• 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. Flows are pre-built for:

  • Basic Redirect Flow Without Session
  • Using Next.js AuthKit Library for Sessions
  • Creating Sessions Using the WorkOS API
  • See this readme for more setup information if you want to create sessions

• 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. Flows are pre-built for:

  • Sign Up (Email/Password)
  • Sign In (Email/Password + Magic Link)
  • Social Authentication (Microsoft, Google, GitHub)
  • Enterprise SSO (Depends on Configuring an SSO connection for an Organization)
  • MFA (Authenticator App + SMS)
  • Email Verification
  • User Updates
  • User Table Views

• Creating new WorkOS Organizations and Generating Admin Portal Links: This shows and examples of how developers can add admin portal functionality into their application instead of generating links themselves from the WorkOS dashboard

• MFA Enrollment and Verification: Shows an example of how to perform in-app MFA using TOTP/QR Code or SMS

• Widgets: An example of our User Management widget for customer delegated administration of users per organization

Prerequisites

• You will need a WorkOS account.
• For demonstrating SSO, you'll want to set up an IDP directory such as Okta, Microsoft Entra, Google Workspace etc. Reach out to someone on the SE or Security team to be added to a Sandbox Tenant of one of these IDPs if you don't already have one/don't want to create your own.

Running the example

1. Install dependencies with npm install or yarn install

2. 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). Create a file named the .env.local and supply your Client ID and Secret Key. Do this for any other environment files you'd wish to switch between.

   WORKOS_CLIENT_ID="<your Client ID>"
   WORKOS_API_KEY="<your Secret Key>"
   SSO_ENABLED_ORGANIZATION_ID="<Organization ID of org you would like to demonstrate SSO with (optional)>"

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

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

5. Once you get familiar with some of the flows, brand your Authkit hosted page