Login with Social Providers

Nextbase supports authentication with various social providers, allowing users to log in using their existing accounts from platforms like Google, GitHub, and Twitter.

Here's the server action used for social provider login:

'use server';
import { createSupabaseUserServerActionClient } from '@/supabase-clients/user/createSupabaseUserServerActionClient';
import { AuthProvider } from '@/types';
import { toSiteURL } from '@/utils/helpers';
 
export const signInWithProvider = async (
  provider: AuthProvider,
  next?: string,
) => {
  const supabase = createSupabaseUserServerActionClient();
  const redirectToURL = new URL(toSiteURL('/auth/callback'));
  if (next) {
    redirectToURL.searchParams.set('next', next);
  }
  const { error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: redirectToURL.toString(),
    },
  });
 
  if (error) {
    throw error;
  }
};

Usage

Here's an example of how to use social provider authentication in your login component:

const providerMutation = useToastMutation(
  async (provider: AuthProvider) => {
    return signInWithProvider(provider, next);
  },
  {
    loadingMessage: 'Requesting login...',
    successMessage: 'Redirecting...',
    errorMessage: 'Failed to login',
  },
);
 
// In your component JSX
<RenderProviders
  providers={['google', 'github', 'twitter']}
  isLoading={providerMutation.isLoading}
  onProviderLoginRequested={providerMutation.mutate}
/>;

This implementation allows users to log in using their accounts from supported social providers.

Usage

On this page