SupabaseS
Supabase•12mo ago
EnderTheNetrunner

Client Side Oauth?

I'm trying to work out a client side PKCE workflow for the sake of integrating Notion Oauth, specifically. Using Next.js. Main concern is whether PKCE actually needs server-side code to work, or if I can hack it client side.

Reason for this is I have Next.js exporting to static, and I don't have an easy way of supporting API routes with it because I have another framework handling the REST API (yes, yes, silly decision, I know).

Here's the code I have so far:

'use client';

import { useSearchParams, useRouter } from 'next/navigation';
import { Suspense } from 'react';

import Loading from '@app/loading';
import { Endpoints } from '@coursefull/enums';
import { supabase } from '@lib/supabase';

async function AuthCallback() {
    const router = useRouter();
    const searchParams = useSearchParams();
    const code = searchParams.get('code');
    const next = searchParams.get('next') ?? '/';

    if (!code) {
        throw new Error(`Auth code not present.`);
    }

    const { error } = await supabase.auth.exchangeCodeForSession(code);

    if (error) {
        throw error;
    }

    router.push(Endpoints.DASHBOARD);

    return <div></div>;
}

export default function Page() {
    return (
        <Suspense fallback={<Loading />}>
            <AuthCallback />
        </Suspense>
    );
}


And the Supabase client mentioned in @lib/supabase:
import { createClient } from '@supabase/supabase-js';

const AUTH_TOKEN_STORAGE_KEY = 'sb-coursefull-auth-token';

const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL || '',
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '',
    {
        auth: {
            flowType: 'pkce',
            storageKey: AUTH_TOKEN_STORAGE_KEY,
        },
    }
);

export default supabase;
export { AUTH_TOKEN_STORAGE_KEY };
Was this page helpful?