Skip to main content

OAuth Providers

End-user social login via Strapi's Users & Permissions plugin. End-users only — these providers authenticate visitors of your app. For CMS-admin SSO see Microsoft SSO.

For the underlying auth architecture see UI Authentication.

Flow​

The callback page is apps/ui/src/app/[locale]/auth/strapi-oauth/[provider]/page.tsx. The Better Auth plugin handling the exchange is strapiOAuthPlugin in apps/ui/src/lib/auth.ts:334.

Setup​

Each provider requires three coordinated configurations: the provider's developer console, the Strapi admin, and (if local) a tunneling service.

1. Strapi admin​

  • Settings → Users & Permissions → Providers
  • Enable the provider (e.g. github)
  • Set Client ID and Client Secret (from the provider's developer console — see step 2)
  • Redirect URL = your UI callback: https://your-domain.com/auth/strapi-oauth/github

2. Provider developer console (example: GitHub)​

GitHub → Settings → Developer settings → OAuth Apps → New OAuth App:

  • Homepage URL = your Strapi URL, e.g. https://your-domain.com
  • Authorization callback URL = https://your-domain.com/api/connect/github/callback

Copy generated Client ID + Secret into the Strapi admin (step 1).

If you previously used /auth/strapi-oauth/callback, update both the Strapi provider settings and the provider developer console to the per-provider callback path.

No UI code changes needed — SignInForm already routes to /api/connect/<provider> on button click. To add a new provider button, extend apps/ui/src/app/[locale]/auth/signin/_components/SocialButtons.tsx.

Local Development with ngrok​

Most OAuth providers reject localhost callbacks. Use ngrok (or similar) to tunnel.

  1. Install ngrok: brew install ngrok

  2. Start Strapi: pnpm dev:strapi

  3. Tunnel Strapi:

    ngrok http 1337

  4. Copy the generated URL (e.g. https://abc123.ngrok.io)

  5. Update apps/strapi/config/server.ts:

    url: "https://abc123.ngrok.io"

  6. Update apps/strapi/src/admin/vite.config.ts:

    server: {
      allowedHosts: ["abc123.ngrok.io"]
    }

  7. Set env var in apps/strapi/.env:

    APP_URL=https://abc123.ngrok.io

  8. GitHub OAuth App:

    • Homepage URL: https://abc123.ngrok.io
    • Authorization callback: https://abc123.ngrok.io/api/connect/github/callback

  9. Strapi admin → Providers → GitHub → Redirect URL: http://localhost:3000/auth/strapi-oauth/github

  10. Restart both Strapi and Next.js

Supported Providers​

Any provider implemented by Strapi's Users & Permissions plugin: GitHub, Google, Facebook, Discord, etc. See the Strapi providers docs.