Social Logins (OAuth-Provider)
Integrieren Sie beliebte OAuth-Provider wie Google, GitHub oder Facebook, um Ihren Benutzern eine nahtlose Anmeldung über soziale Konten zu ermöglichen.
Social Logins (OAuth-Provider) ist eine kostenlose Supabase Backend as a Service-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Supabase Backend as a Service-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Supabase Backend as a Service-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Simplify Sign-Ups with Social Logins
Tired of users creating new passwords for every app? Social logins, also known as OAuth providers, let users sign in with their existing accounts from services like Google, GitHub, or Facebook.
This makes signing up much faster and more convenient, improving the user experience and potentially increasing user adoption.
Supabase Makes OAuth Easy
Supabase acts as a powerful intermediary, simplifying the complex OAuth flow. Instead of you writing intricate logic for each provider, Supabase handles the redirects, token exchanges, and session management securely.
This means you can integrate multiple social login options with minimal code.
Activate Providers in Your Project
Before writing any code, you need to enable the desired social login providers in your Supabase project dashboard.
- Go to Authentication > Providers.
- Toggle on providers like Google, GitHub, or Facebook.
- You'll need to configure their respective Client ID and Client Secret, obtained from the provider's developer console.
The `signInWithOAuth` Method
The core of initiating a social login in your application is the Supabase JavaScript client's signInWithOAuth() method. This function redirects your user to the chosen provider's login page.
It takes a provider name (e.g., 'google', 'github') and an optional options object, typically including a redirectTo URL.
Initiate Google Login
Here's a practical example of how to start a Google login flow. When this code runs, the user will be sent to Google's authentication page.
Remember to replace window.location.origin + '/auth/callback' with your actual callback URL.
import { createClient } from '@supabase/supabase-js';
// Initialize Supabase client (replace with your actual URL and Anon Key)
const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';
const supabase = createClient(supabaseUrl, supabaseAnonKey);
async function signInWithGoogle() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
redirectTo: window.location.origin + '/auth/callback'
}
});
if (error) {
console.error('Error initiating Google login:', error.message);
} else {
console.log('Redirecting to Google for authentication...');
// User will be redirected automatically
}
}
// To run this, you'd typically call signInWithGoogle()
// on a button click event in a web application.
// For example: signInWithGoogle();The OAuth Redirect Flow
After the user successfully logs in with the social provider (e.g., Google), the provider redirects them back to your application.
This redirect includes special parameters in the URL that Supabase uses to establish the user's session securely. It's a critical part of the OAuth process.
Handling the Callback Route
Your application needs a designated callback route (e.g., /auth/callback) to receive the redirect from the OAuth provider.
The Supabase client library automatically listens for these URL parameters on page load and processes them to create a user session. You typically don't need to write explicit code for this route beyond initializing the Supabase client.
Accessing User Session Data
Once authenticated via social login, Supabase provides access to the user's session and profile information. You can use methods like supabase.auth.getSession() to retrieve the active session details.
The session object contains the user's ID, email, and other metadata provided by the OAuth provider.
Check the Current Session
This example shows how to check if a user is currently logged in and retrieve their session data. This is often done after the callback redirect or on app startup.
import { createClient } from '@supabase/supabase-js';
// Initialize Supabase client (replace with your actual URL and Anon Key)
const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';
const supabase = createClient(supabaseUrl, supabaseAnonKey);
async function getCurrentUserSession() {
const { data: { session }, error } = await supabase.auth.getSession();
if (error) {
console.error('Error getting session:', error.message);
return null;
}
if (session) {
console.log('User is logged in!');
console.log('User ID:', session.user.id);
console.log('Email:', session.user.email);
console.log('Provider:', session.user.app_metadata.provider);
return session;
} else {
console.log('No active session.');
return null;
}
}
// Call this function to check the session
// getCurrentUserSession();Keep Your App Secure
Security is paramount with authentication:
- Use HTTPS: Always ensure your application is served over HTTPS.
- Valid `redirectTo` URLs: Configure your
redirectToURLs carefully in both Supabase and the OAuth provider's settings to prevent redirect attacks. - Client-Side Keys: Never expose your Supabase Service Role Key on the client-side; only use the Anon Key for client-side operations.
Social Login Check
When using supabase.auth.signInWithOAuth(), what is the primary purpose of the redirectTo option?
Recap & Next Steps
You've successfully learned how to integrate social logins using Supabase! This powerful feature simplifies user authentication, enhances convenience, and leverages existing user accounts from popular OAuth providers like Google and GitHub.
You now understand the role of signInWithOAuth(), the redirect flow, and how to retrieve user session data.
Next, explore how to manage user sessions and profiles, including updating user metadata and handling logout functionalities securely.
Lerne Supabase Backend as a Service mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 11
- Lektionen
- 40
Häufig gestellte Fragen
Ist die Lektion „Social Logins (OAuth-Provider)“ kostenlos?
Ja — der vollständige Text von „Social Logins (OAuth-Provider)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Supabase Backend as a Service-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Supabase Backend as a Service-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Social Logins (OAuth-Provider)“?
Integrieren Sie beliebte OAuth-Provider wie Google, GitHub oder Facebook, um Ihren Benutzern eine nahtlose Anmeldung über soziale Konten zu ermöglichen. Du übst Supabase Backend as a Service mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Supabase Backend as a Service zu starten?
Keine Vorkenntnisse erforderlich. Supabase Backend as a Service auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Social Logins (OAuth-Provider)“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Supabase Backend as a Service-Lektion Code schreiben und ausführen?
Ja. Jede Supabase Backend as a Service-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Benutzerregistrierung mit E-Mail und Passwort
- Social Logins (OAuth-Provider)
- Benutzersitzungen und Profile verwalten
- Passwortzurücksetzung und Authentifizierung per Magic Link