Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/workos/authkit
The world's best login box powered by WorkOS and Radix.
https://github.com/workos/authkit
auth authentication authentication-backend authentication-middleware authn magic-code oauth2 passwordless-authentication radix-ui sso-authentication user-management
Last synced: about 8 hours ago
JSON representation
The world's best login box powered by WorkOS and Radix.
- Host: GitHub
- URL: https://github.com/workos/authkit
- Owner: workos
- License: mit
- Created: 2023-10-31T13:51:15.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-30T04:21:14.000Z (12 days ago)
- Last Synced: 2024-12-05T00:00:34.950Z (7 days ago)
- Topics: auth, authentication, authentication-backend, authentication-middleware, authn, magic-code, oauth2, passwordless-authentication, radix-ui, sso-authentication, user-management
- Language: TypeScript
- Homepage: https://authkit.com
- Size: 412 KB
- Stars: 2,344
- Watchers: 22
- Forks: 97
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - workos/authkit - The world's best login box powered by WorkOS and Radix. (TypeScript)
- jimsghstars - workos/authkit - The world's best login box powered by WorkOS and Radix. (TypeScript)
README
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](./src/app/using-hosted-authkit)
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](./src/app/using-your-own-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.
## Prerequisites
You will need a [WorkOS account](https://dashboard.workos.com/signup).
## Running the example
1. Install dependencies with `npm install` or `yarn install`
2. Set up your **Environment variables** by signing into your [WorkOS dashboard](https://dashboard.workos.com), 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_.
```bash
WORKOS_CLIENT_ID=""
WORKOS_API_KEY=""
```
3. Configure redirects in your [WorkOS dashboard](https://dashboard.workos.com), navigate to **Redirects** and add the following urls:
```bash
http://localhost:3000/using-your-own-ui/sign-in/google-oauth/callback
```
```bash
http://localhost:3000/using-your-own-ui/sign-in/microsoft-oauth/callback
```
```bash
http://localhost:3000/using-your-own-ui/sign-in/github-oauth/callback
```
```bash
http://localhost:3000/using-your-own-ui/sign-in/sso/callback
```
```bash
http://localhost:3000/using-hosted-authkit/basic/callback
```
```bash
http://localhost:3000/using-hosted-authkit/with-session/callback
```
```bash
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