Supabase Backend as a Service · Leçon

Inscription des utilisateurs par e-mail et mot de passe

Mettre en œuvre une authentification standard par e-mail et mot de passe, avec inscription, connexion et réinitialisation du mot de passe.

Leçon 1 sur 411 étapes

Inscription des utilisateurs par e-mail et mot de passe est une leçon Supabase Backend as a Service gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Supabase Backend as a Service, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Supabase Backend as a Service comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

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?

Réponds-y dans la leçon interactive

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!

Gratuit pour commencer

Apprends Supabase Backend as a Service avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 11
Leçons: 40

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Inscription des utilisateurs par e-mail et mot de passe » est-elle gratuite ?

Oui — le texte complet de « Inscription des utilisateurs par e-mail et mot de passe » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Supabase Backend as a Service, passe à CoddyKit PRO. Le cours Supabase Backend as a Service comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Inscription des utilisateurs par e-mail et mot de passe » ?

Mettre en œuvre une authentification standard par e-mail et mot de passe, avec inscription, connexion et réinitialisation du mot de passe. Tu pratiques Supabase Backend as a Service avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Supabase Backend as a Service ?

Aucune expérience préalable n'est requise. Supabase Backend as a Service sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Inscription des utilisateurs par e-mail et mot de passe » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Supabase Backend as a Service ?

Oui. Chaque leçon Supabase Backend as a Service inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Inscription des utilisateurs par e-mail et mot de passe
Connexions sociales (fournisseurs OAuth)
Gestion des sessions et des profils utilisateurs
Réinitialisation du mot de passe et authentification par lien magique

← Retour à Supabase Backend as a Service