AuthKit

Easy to use authentication platform designed to provide a flexible, secure, and fast integration.

Introduction

Integrating AuthKit into your app is quick and easy. In this guide, we’ll walk you through adding a hosted authentication flow to your application using AuthKit.

In addition to this guide, there are a variety of example apps available to help with your integration.

Before getting started

To get the most out of this guide, you’ll need:

A WorkOS account
Your WorkOS API Key and Client ID

Additionally you’ll need to activate AuthKit in your WorkOS Dashboard if you haven’t already. In the Overview section, click the Set up User Management button and follow the instructions.

WorkOS dashboard with the User Management setup button highlighted

1. Configure your project

Let’s add the necessary dependencies and configuration in your WorkOS Dashboard.

Architecture

Server and clientClient-side only

Frontend

Next.js Remix Vanilla React

Backend

Node.js Ruby Python

Install dependencies

Configure a redirect URI

A redirect URI is a callback endpoint that WorkOS will redirect to after a user has authenticated. This endpoint will exchange the authorization code returned by WorkOS for an authenticated User object. We’ll create this endpoint in the next step.

You can set a redirect URI in the Redirects section of the WorkOS Dashboard.

WorkOS supports using wildcard characters in Redirect URIs, but not for the default Redirect URI. More information about wildcard characters support can be found in the Redirect URIs guide.

When users sign out of their application, they will be redirected to your app’s Logout redirect location which is configured in the same dashboard area.

Login requests should originate from your application. In some instances, requests may not begin at your app. For example, some users might bookmark the hosted login page or they might be led directly to the hosted login page when clicking on a password reset link in an email.

In these cases, AuthKit will detect when a login request did not originate at your application and redirect to your application’s login endpoint. This is an endpoint that you define at your application that redirects users to sign in using AuthKit. We’ll create this endpoint in the next step.

You can configure the login endpoint from the Redirects section of the WorkOS dashboard.

The code examples use your staging API keys when signed in

2. Add AuthKit to your app

Let’s integrate the hosted authentication flow into your app.

Set up the frontend

To demonstrate AuthKit, we only need a simple page with links to logging in and out.

App.js

JavaScript

 export default function App() {
  return (
    <div className="App">
      <h1>AuthKit example</h1>
      <p>This is an example of how to use AuthKit with a React frontend.</p>
      <p>
        <a href="/login">Sign in</a>
      </p>
      <p>
        <a href="/logout">Sign out</a>
      </p>
    </div>
  );
}

Clicking the “Sign in” and “Sign out” links should invoke actions on our server, which we’ll set up next.

If you haven’t configured a Logout redirect in the WorkOS dashboard, users will see an error when logging out.

Validate the authentication flow

Navigate to the authentication endpoint we created and sign up for an account. You can then sign in with the newly created credentials and see the user listed in the Users section of the WorkOS Dashboard.

Example appsView sample AuthKit apps

Up next