Introduction to Custom Authentication in Supabase

Supabase provides a powerful and flexible authentication system out of the box. However, there may be cases where you need to implement custom authentication flows using OAuth and JWTs. This blog post will guide you through the process of setting up custom authentication in Supabase, helping you create a more tailored user experience.

Understanding OAuth and JWTs

Before we dive into the implementation, let's briefly review OAuth and JWTs:

• OAuth (Open Authorization): A protocol that allows secure authorization in a standard method from web, mobile, and desktop applications.
• JWT (JSON Web Token): A compact and self-contained way for securely transmitting information between parties as a JSON object.

These technologies work together to provide a secure and efficient authentication mechanism.

Setting Up OAuth in Supabase

To get started with OAuth in Supabase, follow these steps:

1. Navigate to the Supabase dashboard and select your project.
2. Go to the "Authentication" section and click on "Providers."
3. Enable the OAuth providers you want to use (e.g., Google, Facebook, GitHub).
4. Configure each provider with the necessary credentials (Client ID and Client Secret).

Here's an example of how to set up Google OAuth:

const { createClient } = require('@supabase/supabase-js')

const supabase = createClient('YOUR_SUPABASE_URL', 'YOUR_SUPABASE_KEY')

const { user, session, error } = await supabase.auth.signIn({
  provider: 'google'
})

Implementing Custom JWT Authentication

While Supabase handles JWTs internally, you can also implement custom JWT authentication for more control over the process. Here's how:

1. Create a custom JWT:

const jwt = require('jsonwebtoken')

const generateCustomJWT = (userId, role) => {
  const payload = {
    user_id: userId,
    role: role,
    exp: Math.floor(Date.now() / 1000) + (60 * 60) // 1 hour expiration
  }
  return jwt.sign(payload, 'YOUR_SECRET_KEY')
}

2. Verify the custom JWT:

const verifyCustomJWT = (token) => {
  try {
    const decoded = jwt.verify(token, 'YOUR_SECRET_KEY')
    return decoded
  } catch (error) {
    console.error('Invalid token:', error.message)
    return null
  }
}

3. Integrate with Supabase:

const authenticateUser = async (email, password) => {
  const { user, error } = await supabase.auth.signIn({ email, password })
  
  if (error) {
    console.error('Authentication error:', error.message)
    return null
  }
  
  const customToken = generateCustomJWT(user.id, user.role)
  return customToken
}

Handling Custom Authentication Flow

Now that we have set up OAuth and custom JWT authentication, let's create a complete authentication flow:

1. User initiates login (either through OAuth or email/password)
2. If using OAuth, redirect to the provider's login page
3. Once authenticated, generate a custom JWT
4. Store the JWT securely (e.g., in localStorage or httpOnly cookies)
5. Include the JWT in subsequent API requests to Supabase

Here's an example of how this flow might look in a React application:

import { useState } from 'react'
import { supabase } from './supabaseClient'

const Login = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleLogin = async (e) => {
    e.preventDefault()
    const { user, error } = await supabase.auth.signIn({ email, password })
    if (error) {
      console.error('Error logging in:', error.message)
    } else {
      const customToken = generateCustomJWT(user.id, user.role)
      localStorage.setItem('authToken', customToken)
      // Redirect to dashboard or protected route
    }
  }

  const handleOAuthLogin = async (provider) => {
    const { user, error } = await supabase.auth.signIn({ provider })
    if (error) {
      console.error('Error logging in with OAuth:', error.message)
    } else {
      const customToken = generateCustomJWT(user.id, user.role)
      localStorage.setItem('authToken', customToken)
      // Redirect to dashboard or protected route
    }
  }

  return (
    <div>
      <form onSubmit={handleLogin}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
        />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
        />
        <button type="submit">Login</button>
      </form>
      <button onClick={() => handleOAuthLogin('google')}>Login with Google</button>
      <button onClick={() => handleOAuthLogin('github')}>Login with GitHub</button>
    </div>
  )
}

Securing API Requests

To secure your API requests using the custom JWT, you can create a middleware function that verifies the token:

const authenticateRequest = (req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1]
  if (!token) {
    return res.status(401).json({ error: 'No token provided' })
  }

  const decoded = verifyCustomJWT(token)
  if (!decoded) {
    return res.status(401).json({ error: 'Invalid token' })
  }

  req.user = decoded
  next()
}

Then, use this middleware in your API routes:

app.get('/api/protected-route', authenticateRequest, (req, res) => {
  // Access user information from req.user
  res.json({ message: 'Access granted', user: req.user })
})

Best Practices and Security Considerations

When implementing custom authentication with OAuth and JWTs in Supabase, keep these best practices in mind:

1. Use secure, randomly generated secrets for JWT signing
2. Set appropriate expiration times for JWTs
3. Implement token refresh mechanisms
4. Store tokens securely (preferably in httpOnly cookies)
5. Use HTTPS for all communication
6. Regularly rotate secrets and keys
7. Implement proper error handling and logging

By following these guidelines and implementing custom authentication with OAuth and JWTs, you can create a secure and flexible authentication system in your Supabase project that meets your specific requirements.