Supabase Backend as a Service · 강의

이메일/비밀번호로 사용자 등록

사용자 가입, 로그인, 비밀번호 재설정을 포함한 표준 이메일 및 비밀번호 인증을 구현합니다.

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

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

Email/Password Auth Basics

Welcome to user authentication with Supabase! We'll start with the most common method: email and password.

This method allows users to create an account using their email and a chosen password, and then sign in with those credentials.

Supabase Auth Explained

Supabase provides a complete authentication system out-of-the-box. It handles:

User registration and login
Password hashing and security
Session management
Email confirmations and password resets

All of this is managed through simple client-side methods.

Initialize Supabase Client

Before we can register or log in users, we need to set up the Supabase client. This client will be our bridge to all Supabase services, including authentication.

You'll need your project's URL and anon (public) key, which you can find in your Supabase dashboard settings.

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

const SUPABASE_URL = 'YOUR_SUPABASE_URL'
const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

console.log('Supabase client initialized!')

Registering New Users

To let users create an account, we use the signUp method. This method takes an email and password, and optionally other user metadata.

Supabase handles the secure storage of the password and typically sends a confirmation email to the user.

async function registerUser(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password
  })

  if (error) {
    console.error('Sign up error:', error.message)
  } else {
    console.log('User signed up successfully:', data.user.email)
    console.log('Check your email for a confirmation link!')
  }
}

Try User Sign-Up

Let's put the signUp method into a runnable example. This code simulates a new user registration.

In a real app, you'd get the email and password from a form.

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

const SUPABASE_URL = 'https://abcde12345.supabase.co'
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFiY2RlMTIzNDUiLCJyb2xlIjoiYW5vbiIsImlhdCI6MTY3ODkwMTIzNCwiZXhwIjoxOTk0NTY3ODkwfQ.YOUR_SECRET_KEY'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

async function trySignUp() {
  const testEmail = `testuser${Date.now()}@example.com`
  const testPassword = 'securepassword123'

  console.log(`Attempting to sign up ${testEmail}`)
  const { data, error } = await supabase.auth.signUp({
    email: testEmail,
    password: testPassword
  })

  if (error) {
    console.error('Sign up failed:', error.message)
  } else {
    console.log('Sign up successful! User ID:', data.user.id)
    console.log('Confirmation email sent to:', data.user.email)
  }
}

trySignUp()

Email Confirmation Step

After a user signs up, Supabase usually sends a confirmation email. This is a vital security measure to verify email ownership.

Users click a link in the email.
This link verifies their email address.
Their account becomes active and they can then sign in.

You can configure email templates and redirection URLs in your Supabase project settings.

Logging In Existing Users

Once a user has registered and confirmed their email, they can log in using the signInWithPassword method.

This method authenticates the user and returns a session object, allowing them to access protected resources.

async function signInUser(email, password) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: email,
    password: password
  })

  if (error) {
    console.error('Sign in error:', error.message)
  } else {
    console.log('User signed in successfully:', data.user.email)
    console.log('Session access token:', data.session.access_token)
  }
}

Try User Sign-In

Here's a runnable example of signing in a user. Remember, for this to work, the user must already be registered and their email confirmed.

You would typically store the session token for subsequent authenticated requests.

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

const SUPABASE_URL = 'https://abcde12345.supabase.co'
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFiY2RlMTIzNDUiLCJyb2xlIjoiYW5vbiIsImlhdCI6MTY3ODkwMTIzNCwiZXhwIjoxOTk0NTY3ODkwfQ.YOUR_SECRET_KEY'

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)

async function trySignIn() {
  const existingEmail = 'an_existing_user@example.com' // Replace with a real registered email
  const existingPassword = 'securepassword123' // Replace with that user's password

  console.log(`Attempting to sign in ${existingEmail}`)
  const { data, error } = await supabase.auth.signInWithPassword({
    email: existingEmail,
    password: existingPassword
  })

  if (error) {
    console.error('Sign in failed:', error.message)
  } else {
    console.log('Sign in successful! User ID:', data.user.id)
    console.log('Current session:', data.session)
  }
}

trySignIn()

Initiating Password Resets

What if a user forgets their password? Supabase makes it easy to handle password resets securely using resetPasswordForEmail.

This method sends a special magic link to the user's email, which they can use to set a new password.

async function requestPasswordReset(email) {
  const { data, error } = await supabase.auth.resetPasswordForEmail(email, {
    redirectTo: 'https://example.com/update-password' // User redirected here after clicking link
  })

  if (error) {
    console.error('Password reset request error:', error.message)
  } else {
    console.log('Password reset email sent successfully to:', email)
  }
}

Auth Methods Check

Which Supabase Auth method is used to create a new user account with an email and password?

Email/Password Auth Summary

Great job! You've learned the core of email and password authentication with Supabase:

Initializing the Supabase client.
Using signUp to register new users.
Understanding the email confirmation process.
Using signInWithPassword to log in existing users.
Initiating password resets with resetPasswordForEmail.

This forms the foundation for secure user management in your applications!

자주 묻는 질문

“이메일/비밀번호로 사용자 등록” 강의는 무료인가요?

네 — “이메일/비밀번호로 사용자 등록” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 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개 중 1번째 강의입니다.

“이메일/비밀번호로 사용자 등록” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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