0Pricing
Supabase Backend as a Service · 강의

사용자 세션과 프로필 관리

애플리케이션에서 사용자 세션을 관리하고 사용자 메타데이터를 가져오며 사용자 프로필을 안전하게 업데이트하는 방법을 배웁니다.

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

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

User Sessions & Profiles Intro

Welcome! In this lesson, we'll dive into managing user sessions and updating user profiles securely with Supabase.

When a user logs in, Supabase creates a session. This session keeps track of who the user is and ensures they remain authenticated across requests.

A user's profile often includes details like their name, avatar, or preferences. Supabase helps you store and manage this data.

Accessing the Current Session

To interact with the currently logged-in user, you first need to access their session. Supabase stores session tokens securely, usually in local storage or cookies.

You can retrieve the active session using supabase.auth.getSession(). This call returns a Promise that resolves with the session data.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

const supabase = createClient(supabaseUrl, supabaseAnonKey);

async function getCurrentSession() {
  const { data: { session }, error } = await supabase.auth.getSession();

  if (error) {
    console.error('Error getting session:', error.message);
    return;
  }

  if (session) {
    console.log('Current session:', session);
    console.log('User ID:', session.user.id);
    console.log('User email:', session.user.email);
  } else {
    console.log('No active session.');
  }
}

getCurrentSession();

Exploring the User Object

The session object contains a user property, which holds important information about the authenticated user.

Key properties within the user object include:

  • id: A unique identifier for the user.
  • email: The user's email address.
  • created_at: When the user account was created.
  • user_metadata: A JSON object for custom profile data.

We often store things like a user's display name or avatar URL in user_metadata.

Accessing User Profile Data

The user_metadata field within the user object is where you can store custom profile information. This data is part of the authentication service, not your main database tables.

It's a flexible JSON object, allowing you to store various details directly tied to the user's authentication record.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

const supabase = createClient(supabaseUrl, supabaseAnonKey);

async function getUserProfile() {
  const { data: { user }, error } = await supabase.auth.getUser();

  if (error) {
    console.error('Error getting user:', error.message);
    return;
  }

  if (user) {
    console.log('User ID:', user.id);
    console.log('Email:', user.email);
    console.log('User Metadata:', user.user_metadata);

    // Access specific metadata
    const displayName = user.user_metadata?.display_name || 'Guest';
    console.log('Display Name:', displayName);
  } else {
    console.log('No user logged in.');
  }
}

getUserProfile();

Modifying User Profile Data

To update a user's profile information, specifically their user_metadata, you use the supabase.auth.updateUser() method.

You pass an object to this method, with a data property that contains the new user_metadata. Supabase will merge this new data with any existing metadata.

  • Security Note: Always ensure you have appropriate Row-Level Security (RLS) policies in your database if you store sensitive profile data there. For user_metadata, Supabase handles its security.

Live Update User Metadata

Let's update a user's display name and add an avatar URL to their user_metadata.

Remember, the data property is for fields like user_metadata. Other fields like email or password are updated differently.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

const supabase = createClient(supabaseUrl, supabaseAnonKey);

async function updateProfile() {
  // This assumes a user is already logged in
  const { data: { user }, error: getUserError } = await supabase.auth.getUser();

  if (getUserError || !user) {
    console.error('No user logged in or error getting user:', getUserError?.message);
    return;
  }

  const { data, error } = await supabase.auth.updateUser({
    data: {
      display_name: 'Coddy Learner',
      avatar_url: 'https://example.com/coddy_avatar.png'
    }
  });

  if (error) {
    console.error('Error updating user metadata:', error.message);
  } else {
    console.log('Profile updated successfully!', data.user.user_metadata);
  }
}

// In a real app, you'd call this after a user logs in
// or on a profile settings page.
// For this example, assume a user is logged in.
updateProfile();

Changing Email & Password

Besides user_metadata, users can also update their email address and password.

  • Updating Email: Requires a confirmation flow. The user receives an email with a link to confirm the new address.
  • Updating Password: Directly changes the password. For security, always prompt the user to re-authenticate or enter their current password before allowing a change.

These are also handled via supabase.auth.updateUser(), but you pass the email or password property directly, not within the data object.

Ending a User Session

When a user wants to log out, you need to terminate their active session. This securely removes their authentication tokens and prevents further access to protected resources.

The supabase.auth.signOut() method handles this process for you. It invalidates the session and clears any stored tokens.

After signing out, it's good practice to redirect the user to a public page (e.g., login screen) and clear any client-side application state related to the user.

Logging Out a User

This simple code snippet demonstrates how to sign out a user. After this, their session will be invalid.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'YOUR_SUPABASE_URL';
const supabaseAnonKey = 'YOUR_SUPABASE_ANON_KEY';

const supabase = createClient(supabaseUrl, supabaseAnonKey);

async function signOutUser() {
  const { error } = await supabase.auth.signOut();

  if (error) {
    console.error('Error signing out:', error.message);
  } else {
    console.log('User signed out successfully!');
    // You might redirect the user here
    // window.location.href = '/login';
  }
}

// Call this function when a user clicks a "Logout" button
signOutUser();

Security for Profile Management

When managing user profiles, security is paramount:

  • Row-Level Security (RLS): If you store profile data in separate database tables (e.g., a profiles table), always implement RLS to ensure users can only read/update their own data.
  • Client-side Validation: While important for user experience, never rely solely on client-side validation. Always validate data on the server (e.g., using Edge Functions or database constraints).
  • Sensitive Data: Avoid storing highly sensitive information directly in user_metadata. For truly sensitive data, consider encrypted storage or dedicated, strictly controlled database tables.

Profile Update Check

You want to update a user's display name and favorite color, which are stored in their custom profile data.

Which method and property should you use with the Supabase client library?

Session & Profile Recap

Great job! You've learned how to manage user sessions and profiles:

  • Accessed the current user's session and user object.
  • Retrieved and updated custom user_metadata using supabase.auth.updateUser({ data: {...} }).
  • Understood how to handle email/password updates.
  • Implemented user logout with supabase.auth.signOut().
  • Reviewed key security considerations for profile data.

Next, you might explore integrating social logins or advanced RLS for profile tables!

자주 묻는 질문

“사용자 세션과 프로필 관리” 강의는 무료인가요?

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

“사용자 세션과 프로필 관리”에서 뭘 배우나요?

애플리케이션에서 사용자 세션을 관리하고 사용자 메타데이터를 가져오며 사용자 프로필을 안전하게 업데이트하는 방법을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 Supabase Backend as a Service을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“사용자 세션과 프로필 관리” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 이메일/비밀번호로 사용자 등록
  2. 소셜 로그인(OAuth 제공자)
  3. 사용자 세션과 프로필 관리
  4. 비밀번호 재설정과 매직 링크 인증
← Supabase Backend as a Service(으)로 돌아가기