Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Screenshots #20

Merged
merged 2 commits into from
Jan 10, 2024
Merged

Screenshots #20

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aef962e
Updated README.md and version bump
PaulAsjes Jan 10, 2024
b58688c
Updated screenshot
PaulAsjes Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 41 additions & 41 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
<p align="center">
<img src="https://github.com/workos/authkit/assets/896475/9fa7a91e-f5a8-4922-96fb-20a7b478d075" width="72" />
<h1 align="center">AuthKit</h1>
<p align="center">How to use AuthKit's hosted UI or build your own frontend with the headless User Management APIs</p>
<p align="center"><a href="https://workos.com/docs/user-management">Explore the docs ↗</a></strong></p>
<br><br><br>
<p align="center">How to use AuthKit's hosted UI or build your own frontend with the headless User Management APIs</p>
<p align="center"><a href="https://workos.com/docs/user-management">Explore the docs ↗</a></strong></p>
</p>

<p align="center">
<img alt="Screenshot of hosted UI AuthKit in light mode" src="https://github.com/workos/authkit/assets/108872335/200931ff-51fc-4825-894d-696dd17b88f6">
</p>

## Examples
Expand All @@ -19,41 +22,38 @@ There are two ways to use AuthKit and this repository contains examples for both

You will need a [WorkOS account](https://dashboard.workos.com/signup).

### Environment variables

Sign in to 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="<your Client ID>"
WORKOS_API_KEY="<your Secret Key>"
```

### 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
```
## Running the example

1. Install dependencies with `npm install` or `yarn install`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With yarn you can just do yarn without install—although not sure whether we want to mention yarn at all given how popular the alternative package managers have become

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I considered that, but for new developers it might not be obvious enough that these do the same thing.

In terms of alternative package managers, I think yarn and npm are ubiquitous enough to get a mention while the others haven't hit that critical mass yet. Either way I don't think it'll hurt to have both npm and yarn here.

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="<your Client ID>"
WORKOS_API_KEY="<your Secret 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
```
4. Run the example with `npm run dev` or `yarn dev` and navigate to http://localhost:3000