Authentication
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.