Supabase Backend as a Service · Урок

Управление сеансами и профилями пользователей

Научитесь безопасно управлять сеансами пользователей, получать метаданные и обновлять профили пользователей в приложении.

«Управление сеансами и профилями пользователей» — бесплатный урок Supabase Backend as a Service на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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) и разблокировать остальной курс Supabase Backend as a Service, подпишись на CoddyKit PRO. Курс Supabase Backend as a Service содержит 4 уроков всего.

Чему я научусь в уроке «Управление сеансами и профилями пользователей»?

Научитесь безопасно управлять сеансами пользователей, получать метаданные и обновлять профили пользователей в приложении. Ты практикуешь Supabase Backend as a Service с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Supabase Backend as a Service?

Предыдущий опыт не требуется. Supabase Backend as a Service на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Управление сеансами и профилями пользователей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Supabase Backend as a Service?

Да. Каждый урок Supabase Backend as a Service включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Регистрация пользователей по электронной почте и паролю
Вход через социальные сети (провайдеры OAuth)
Управление сеансами и профилями пользователей
Сброс пароля и аутентификация по волшебной ссылке

← Назад к Supabase Backend as a Service