OAuth Providers | Sylphx Documentation

9+ Providers

All major OAuth providers supported

Auto Linking

Same email = linked accounts

Custom Scopes

Request additional permissions

One-Click Setup

Configure in dashboard

Supported Providers

Sylphx supports the following OAuth providers out of the box:

Googlegoogle

GitHubgithub

Appleapple

Discorddiscord

Twitter/Xtwitter

Facebookfacebook

Microsoftmicrosoft

LinkedInlinkedin

Spotifyspotify

Configuration

Open Dashboard

Go to App Settings → Authentication → OAuth Providers

Enable Providers

Toggle on the providers you want to use

Add Credentials

Enter your Client ID and Client Secret from each provider

Set Callback URL

Add the callback URL to your provider's developer console

Callback URL

Use this callback URL in your OAuth provider settings:https://sylphx.com/api/auth/callback/[provider]Replace [provider] with the provider ID (e.g., google).

Implementation

Add OAuth sign-in buttons to your app:

Social Login Buttons

'use client'

import { useAuth } from '@sylphx/platform-sdk/react'

export function SocialLoginButtons() {
  const { signInWithOAuth } = useAuth()

  return (
    <div className="space-y-3">
      <button
        onClick={() => signInWithOAuth('google')}
        className="w-full flex items-center justify-center gap-2 rounded-lg border p-3"
      >
        <GoogleIcon />
        Continue with Google
      </button>

      <button
        onClick={() => signInWithOAuth('github')}
        className="w-full flex items-center justify-center gap-2 rounded-lg border p-3"
      >
        <GitHubIcon />
        Continue with GitHub
      </button>

      <button
        onClick={() => signInWithOAuth('apple')}
        className="w-full flex items-center justify-center gap-2 rounded-lg border p-3"
      >
        <AppleIcon />
        Continue with Apple
      </button>
    </div>
  )
}

Combined Login Form

'use client'

import { useAuth } from '@sylphx/platform-sdk/react'
import { useState } from 'react'

export function LoginPage() {
  const { signIn, signInWithOAuth } = useAuth()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  return (
    <div className="max-w-md mx-auto p-6">
      <h1 className="text-2xl font-bold mb-6">Sign In</h1>

      {/* OAuth buttons */}
      <div className="space-y-3 mb-6">
        <button onClick={() => signInWithOAuth('google')}>Continue with Google</button>
        <button onClick={() => signInWithOAuth('github')}>Continue with GitHub</button>
      </div>

      <div className="relative my-6">
        <div className="absolute inset-0 flex items-center">
          <div className="w-full border-t" />
        </div>
        <div className="relative flex justify-center text-sm">
          <span className="bg-white px-2 text-gray-500">Or continue with email</span>
        </div>
      </div>

      {/* Email/password form */}
      <form onSubmit={async (e) => { e.preventDefault(); await signIn({ email, password }) }}>
        <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
        <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
        <button type="submit">Sign In</button>
      </form>
    </div>
  )
}

Callback Handling

Set up the OAuth callback route in your Next.js app:

app/api/auth/callback/[provider]/route.ts

import { handleAuthCallback } from '@sylphx/platform-sdk/nextjs'

export const GET = handleAuthCallback({
  // Redirect after successful auth
  afterSignInUrl: '/dashboard',
  afterSignUpUrl: '/onboarding',
})

Automatic Account Linking

When a user signs in with OAuth using an email that matches an existing account, the accounts are automatically linked. The user can then sign in with either method.

Custom OAuth Scopes

Request additional permissions from OAuth providers:

// Request additional scopes
signInWithOAuth('google', {
  scopes: ['https://www.googleapis.com/auth/calendar.readonly'],
})

signInWithOAuth('github', {
  scopes: ['repo', 'read:user'],
})

Scope Requirements

Additional scopes may require app verification with the OAuth provider. Check each provider's documentation for scope requirements.

Provider-Specific Setup

Google

Open Console →

Go to Google Cloud Console
Create a new project or select existing
Enable the Google+ API
Create OAuth credentials (Web application type)
Add authorized redirect URI

GitHub

Open Console →

Go to GitHub Developer Settings
Create a new OAuth App
Set the Authorization callback URL
Copy Client ID and generate Client Secret

Apple

Open Console →

Go to Apple Developer Portal
Register an App ID with Sign in with Apple capability
Create a Services ID for web authentication
Configure domains and redirect URLs
Create a private key for client authentication

Two-Factor Auth

Add extra security with TOTP

Billing Plans

Set up subscriptions with Stripe