Google Auth

import despia from 'despia-native';

import despia from 'despia-native'

const handleGoogleSignIn = async () => {
    const isDespia = navigator.userAgent.toLowerCase().includes('despia')

    if (isDespia) {
        // Native: get OAuth URL from your backend and open in secure browser
        const { url } = await fetch('/api/auth/google-url', {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({ deeplink_scheme: 'myapp' }), // Despia > Publish > Deeplink
        }).then(r => r.json())

        despia(`oauth://?url=${encodeURIComponent(url)}`)

    } else {
        // Web: standard OAuth redirect, no bridge needed
        // Call your auth provider's OAuth method e.g. supabase.auth.signInWithOAuth(), firebase signInWithPopup(), auth0.loginWithRedirect()
        await yourAuthProvider.signInWithGoogle({ redirectTo: window.location.origin + '/auth' })
    }
}

Chrome Custom Tabs:
  Google → /api/auth/google-callback?code=xxx (your backend)
         → backend exchanges code for tokens
         → backend redirects to native-callback.html with tokens in hash
         → native-callback.html fires myapp://oauth/auth?access_token=xxx
         → Despia closes Chrome Custom Tabs

// POST /api/auth/google-url
// Returns a Google OAuth URL using authorization code + PKCE
import crypto from 'crypto'

export async function POST(req) {
    const { deeplink_scheme } = await req.json()

    // Generate PKCE values
    const codeVerifier  = crypto.randomBytes(32).toString('base64url')
    const codeChallenge = crypto.createHash('sha256').update(codeVerifier).digest('base64url')

    // Store codeVerifier and deeplink_scheme server-side (session, cache, etc.)
    // You will need them in your callback handler to exchange the code for tokens
    await storeOAuthState({ codeVerifier, deeplink_scheme })

    const redirectUri = 'https://yourapp.com/api/auth/google-callback'

    const oauthUrl = 'https://accounts.google.com/o/oauth2/v2/auth?' + new URLSearchParams({
        client_id:             process.env.GOOGLE_CLIENT_ID,
        redirect_uri:          redirectUri,
        response_type:         'code',
        scope:                 'openid email profile',
        code_challenge:        codeChallenge,
        code_challenge_method: 'S256',
    })

    return Response.json({ url: oauthUrl })
}

// GET /api/auth/google-callback
// Google redirects here with ?code=xxx after authentication
export async function GET(req) {
    const { searchParams } = new URL(req.url)
    const code = searchParams.get('code')

    const { codeVerifier, deeplink_scheme } = await retrieveOAuthState()

    // Exchange code for tokens
    const tokenRes = await fetch('https://oauth2.googleapis.com/token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
            code,
            client_id:     process.env.GOOGLE_CLIENT_ID,
            client_secret: process.env.GOOGLE_CLIENT_SECRET,
            redirect_uri:  'https://yourapp.com/api/auth/google-callback',
            grant_type:    'authorization_code',
            code_verifier: codeVerifier,
        }),
    })
    const { access_token, refresh_token } = await tokenRes.json()

    // Redirect browser to native-callback.html with tokens
    return Response.redirect(
        `https://yourapp.com/native-callback.html` +
        `?deeplink_scheme=${encodeURIComponent(deeplink_scheme)}` +
        `#access_token=${encodeURIComponent(access_token)}` +
        `&refresh_token=${encodeURIComponent(refresh_token || '')}`
    )
}

// src/pages/Auth.jsx
import { useEffect } from 'react'
import { useSearchParams, useNavigate } from 'react-router-dom'

const Auth = () => {
    const [searchParams] = useSearchParams()
    const navigate = useNavigate()

    useEffect(() => {
        // Also check hash for web flow (Supabase puts tokens in hash on web)
        const hash         = new URLSearchParams(window.location.hash.substring(1))
        const accessToken  = searchParams.get('access_token')  || hash.get('access_token')
        const refreshToken = searchParams.get('refresh_token') || hash.get('refresh_token') || ''
        const error        = searchParams.get('error')         || hash.get('error')

        if (error) { console.error(error); return }

        if (accessToken) {
            // setSession: Supabase = supabase.auth.setSession(), Firebase = signInWithCredential(), custom = your session endpoint
            setSession({ access_token: accessToken, refresh_token: refreshToken })
                .then(() => navigate('/'))
        }
    }, [searchParams, navigate])

    return (
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh' }}>
            <p>Signing you in...</p>
        </div>
    )
}

export default Auth

import despia from 'despia-native'

const isDespia = navigator.userAgent.toLowerCase().includes('despia')

const handleGoogleSignIn = async () => {
    if (isDespia) {
        // Native: open secure browser via oauth:// bridge
        const { url } = await fetch('/api/auth/google-url', {
            method:  'POST',
            headers: { 'Content-Type': 'application/json' },
            body:    JSON.stringify({ deeplink_scheme: 'myapp' }), // Despia > Publish > Deeplink
        }).then(r => r.json())

        despia(`oauth://?url=${encodeURIComponent(url)}`)

    } else {
        // Web: standard OAuth redirect
        // Call your auth provider's OAuth method
        await yourAuthProvider.signInWithGoogle({ redirectTo: window.location.origin + '/auth' })
    }
}

// src/pages/AuthDebug.jsx, swap in as /auth route during testing only
import { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'

const AuthDebug = () => {
    const [searchParams] = useSearchParams()
    const [info, setInfo] = useState('')

    useEffect(() => {
        const hash = new URLSearchParams(window.location.hash.substring(1))
        setInfo(
            'Full URL:\n'      + window.location.href                                           + '\n\n' +
            'access_token:\n'  + (searchParams.get('access_token')  || hash.get('access_token')  || '(none)') + '\n\n' +
            'refresh_token:\n' + (searchParams.get('refresh_token') || hash.get('refresh_token') || '(none)') + '\n\n' +
            'error:\n'         + (searchParams.get('error')         || hash.get('error')         || '(none)')
        )
    }, [searchParams])

    return (
        <div style={{ padding: 20, fontFamily: 'monospace', fontSize: 12 }}>
            <p style={{ marginBottom: 8, fontWeight: 'bold' }}>Auth Debug, remove before shipping</p>
            <textarea readOnly value={info} style={{ width: '100%', height: 240, fontSize: 12, border: '1px solid #ccc', padding: 10, boxSizing: 'border-box', fontFamily: 'monospace' }} />
            <p style={{ marginTop: 8, fontSize: 11 }}>
                Empty? Token did not arrive. Check native-callback.html and the deeplink format.<br />
                Token present but not signed in? Your auth logic is not reacting to URL changes. See step 5.
            </p>
        </div>
    )
}

export default AuthDebug

<Route path="/auth" element={<AuthDebug />} /> // testing
<Route path="/auth" element={<Auth />} />       // production