Supabase Backend as a Service · 강의

소셜 로그인(OAuth 제공자)

Google, GitHub, Facebook과 같은 인기 OAuth 제공자를 통합하여 사용자가 원활하게 소셜 로그인을 이용하도록 합니다.

소셜 로그인(OAuth 제공자)은(는) CoddyKit의 무료 Supabase Backend as a Service 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Supabase Backend as a Service 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Supabase Backend as a Service 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

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 redirectTo URLs 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.

자주 묻는 질문

“소셜 로그인(OAuth 제공자)” 강의는 무료인가요?

네 — “소셜 로그인(OAuth 제공자)” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Supabase Backend as a Service 강의 전체를 잠금 해제할 수 있습니다. Supabase Backend as a Service 강의에는 총 4개의 강의가 포함되어 있습니다.

“소셜 로그인(OAuth 제공자)”에서 뭘 배우나요?

Google, GitHub, Facebook과 같은 인기 OAuth 제공자를 통합하여 사용자가 원활하게 소셜 로그인을 이용하도록 합니다. 브라우저에서 직접 실행하는 실습 코드로 Supabase Backend as a Service을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Supabase Backend as a Service을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Supabase Backend as a Service은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“소셜 로그인(OAuth 제공자)” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Supabase Backend as a Service 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Supabase Backend as a Service 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Supabase Backend as a Service(으)로 돌아가기