Auth

SSO and Social Login with WorkOS

Use Social Login with WorkOS

Step 1. Create a WorkOS organization

Log in to the WorkOS dashboard and visit the Organizations tab to create an organization. Create an Organization

Alternatively, you can create an organization via the WorkOS API.

Step 2. Obtain your Client ID and WORKOS_API_KEY values

Get your Environment's Client ID and Secret

Visit the getting started page of the WorkOS Dashboard. Copy the following values from the Quickstart panel:

  • WORKOS_CLIENT_ID
  • WORKOS_API_KEY

Step 3. Add your WorkOS credentials to your Supabase project

Enter your WorkOS application details in your Supabase app's auth provider settings panel

  1. Go to your Supabase Project Dashboard.
  2. In the left sidebar, click the Authentication icon (near the top).
  3. Click on Providers under the Configuration section.
  4. Click on WorkOS from the accordion list to expand.
  5. Toggle the WorkOS Enabled switch to ON.
  6. Enter https://api.workos.com in the WorkOS URL field.
  7. Enter your WorkOS Client ID and WorkOS Client Secret saved in the previous step.
  8. Copy the Callback URL (for OAuth) value from the form and save it somewhere handy.
  9. Click Save.

Step 4. Set your Supabase redirect URI in the WorkOS Dashboard

Visit the WorkOS dashboard and click the redirects button in the left navigation panel.

On the redirects page, enter your Supabase project's Callback URL (for OAuth) which you saved in the previous step, as shown below:

Set your Supbase project redirect URL in the WorkOS dashboard

Step 5. Add login code to your client app

When a user signs in, call signInWithOAuth with workos as the provider.


_15
async function signInWithWorkOS() {
_15
const { data, error } = await supabase.auth.signInWithOAuth({
_15
provider: 'workos',
_15
options: {
_15
redirectTo: 'http://example.com/auth/v1/callback', // Make sure your redirect URL is configured in the Supabase Dashboard Auth settings
_15
queryParams: {
_15
connection: '<connection_id>',
_15
},
_15
},
_15
})
_15
_15
if (data.url) {
_15
redirect(data.url) // use the redirect API for your server or framework
_15
}
_15
}

Within your specified callback URL, you'll exchange the code for a logged-in user profile:

auth/v1/callback/route.ts

_29
import { NextResponse } from 'next/server'
_29
import { createClient } from '@/utils/supabase/server'
_29
_29
export async function GET(request: Request) {
_29
const { searchParams, origin } = new URL(request.url)
_29
const code = searchParams.get('code')
_29
// if "next" is in param, use it as the redirect URL
_29
const next = searchParams.get('next') ?? '/'
_29
_29
if (code) {
_29
const supabase = await createClient()
_29
const { error } = await supabase.auth.exchangeCodeForSession(code)
_29
if (!error) {
_29
const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
_29
const isLocalEnv = process.env.NODE_ENV === 'development'
_29
if (isLocalEnv) {
_29
// we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
_29
return NextResponse.redirect(`${origin}${next}`)
_29
} else if (forwardedHost) {
_29
return NextResponse.redirect(`https://${forwardedHost}${next}`)
_29
} else {
_29
return NextResponse.redirect(`${origin}${next}`)
_29
}
_29
}
_29
}
_29
_29
// return the user to an error page with instructions
_29
return NextResponse.redirect(`${origin}/auth/auth-code-error`)
_29
}

Resources