Tạm biệt Devise! Cùng Khám Phá Thư Viện Xác Thực 'Chính Chủ' Của Rails 8 (Kèm React API)

Lê Lân

13/07/2025

Rails 8 Authentication với React API: Hướng Dẫn Triển Khai Chi Tiết

Mở Đầu

Chuyển từ Devise sang thư viện xác thực mới của Rails 8 mang đến một trải nghiệm hoàn toàn mới về bảo mật và hiệu suất khi phát triển ứng dụng web.

Sau nhiều năm sử dụng Devise, việc tiếp cận với hệ thống xác thực mới trong Rails 8 đặc biệt hấp dẫn khi xây dựng một dự án React + Rails dưới dạng API. Bài viết này sẽ giúp bạn hiểu tổng quát về cách Rails 8 triển khai authentication, tập trung vào việc tích hợp trong kiến trúc API và React làm front-end. Chúng ta sẽ tìm hiểu từ nguyên lý hoạt động, cấu trúc model-session, đến từng bước cụ thể xây dựng back-end và front-end, cũng như các lưu ý quan trọng để áp dụng hiệu quả trong môi trường phát triển thực tế.

Tổng Quan Rails 8 Authentication

Rails 8 Authentication - Các Nguyên Lý Chính

Rails 8 mang đến một thư viện xác thực tối giản, an toàn và dễ mở rộng, dựa trên các mô hình và concern tiêu chuẩn.

Authentication Concern

Quản lý logic tạo và duy trì phiên làm việc (session).

Xác thực người dùng thông qua các phương thức trước action controller (before_action).

Thiết lập context Current request với ActiveSupport::CurrentAttributes – giúp lưu trạng thái user và session theo mỗi request, đảm bảo thread-safe.

Hỗ trợ authenticated? helper cho việc render điều kiện trong views, thay thế cách dùng if current_user .

Bạn có thể cho phép một số action không cần xác thực bằng allow_unauthenticated_access trong controller.

DB-Backed Sessions

Phiên làm việc giờ đây được lưu trong bảng sessions trên database, với các thông tin:

ID phiên được gửi về client dưới dạng cookie session_id .

Thông tin người dùng, user agent, địa chỉ IP được giữ bảo mật ở server.

Hỗ trợ nhiều thiết bị và phiên song song.

Request Context Qua Current Model

Current là object dạng singleton, thread-safe, theo scope mỗi request:

Current.session trả về phiên làm việc đang kích hoạt.

Current.user tương ứng với user đã xác thực.

Triển Khai Rails Back-End

1. Tạo Authentication

Chạy generator tích hợp:

bin/rails generate authentication
bin/rails db:migrate

Generator tạo ra:

Model User (bao gồm has_secure_password với bcrypt).

Model Session để lưu trạng thái phiên.

Concern Authentication xử lý các luồng xác thực.

Controllers cho session, password reset.

Mailers cho reset password.

Lưu ý: Generator không tạo sẵn controller cho user signup, nên ta tự thêm.

2. Cấu Hình CORS & CSRF

Để React (origin khác) gọi API thành công, cấu hình:

Gem rack-cors và file config/initializers/cors.rb cho phép origin được tin cậy.

Thêm credentials: true ở cả Rails và fetch để gửi cookie session.

Chỉnh lại CSRF trong ApplicationController để chấp nhận origin frontend.

3. Viết Controllers API

UsersController để đăng ký

class Api::UsersController < ApplicationController
  allow_unauthenticated_access only: %i[create]

  def create
    @user = User.new(user_params)
    if @user.save
      render json: { user: @user, notice: "User created successfully" }
    else
      render json: { errors: @user.errors.full_messages, status: :unprocessable_entity }
    end
  end

  private
  
  def user_params
    params.require(:user).permit(:email_address, :password, :password_confirmation)
  end
end

SessionsController để đăng nhập / đăng xuất

class Api::SessionsController < ApplicationController
  allow_unauthenticated_access only: %i[create]

  def create
    if user = User.authenticate_by(params.permit(:email_address, :password))
      start_new_session_for user
      render json: { user: user, authenticated: true, notice: "Successfully logged in" }
    else
      render json: { error: "Invalid email or password" }, status: :unauthorized
    end
  end

  def show
    if Current.session.user
      render json: { authenticated: true, user: Current.session.user }
    else
      render json: { authenticated: false, error: "Not logged in" }, status: :unauthorized
    end
  end

  def destroy
    terminate_session
    render json: { notice: 'Successfully logged out' }
  rescue => e
    render json: { error: "Failed to log out: #{e.message}" }, status: :internal_server_error
  end
end

4. Định tuyến

namespace :api do
  resource :session, only: [:create, :show, :destroy]
  resource :user, only: [:create]
end

React Front-End: Tích Hợp Với Rails API

1. Cấu hình Proxy

Giúp redirect request /api về đúng Rails server:

Nếu dùng vite:

export default {
  server: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
}

Nếu dùng Create React App, trong package.json :

"proxy": "http://localhost:3000"

2. Component Xác Thực (AuthForm.jsx)

Có trạng thái signUp để chuyển đổi form đăng ký / đăng nhập.

Khi đăng ký, gửi POST đến /api/user .

Khi đăng nhập, gửi POST đến /api/session với credentials: 'include' để gửi cookie session.

Quản lý lỗi và phản hồi trong UI.

3. Xác Thực Phiên Làm Việc Khi Load Trang

Sử dụng useEffect trong App.jsx :

fetch('/api/session', { credentials: 'include' })
  .then(async (res) => {
    const data = await res.json();
    if (res.ok) {
      setAuthChecked(true);
      setUser(data.user);
      setLoggedIn(data.authenticated);
    } else {
      setLoggedIn(data.authenticated);
      setAuthChecked(true);
      showAlert(data.error || "Authentication failed");
    }
  })
  .catch(() => setAuthChecked(true));

4. Đăng Xuất

Gửi DELETE request đến /api/session :

fetch('/api/session', { method: 'DELETE' })
  .then(async (res) => {
    const data = await res.json();
    if (res.ok) {
      showAlert(data.notice);
      setUser(null);
      setLoggedIn(false);
    } else {
      showAlert(data.errors ? data.errors.join(', ') : "Logout failed.");
    }
  });

Các Lưu Ý Quan Trọng Cho Production

Phục vụ Rails và React qua HTTPS để bảo mật cookie.

Cấu hình chính xác trusted_origins trên Rails cho cả môi trường dev & prod.

Nếu sử dụng subdomain, điều chỉnh thuộc tính domain của cookie session.

Mở rộng tính năng: xây dựng giao diện và API cho đặt lại mật khẩu, xác thực email, và mailers cho đăng ký.

Tách fetch API authentication trong React thành custom hooks để tái sử dụng và dễ bảo trì.

Sử dụng credentials: 'include' trong fetch giúp trình duyệt gửi cookie phiên làm việc, đảm bảo trạng thái đăng nhập được giữ xuyên suốt.

Kết Luận

Việc triển khai authentication trong Rails 8 API với React front-end sử dụng DB-backed sessions và mô hình Current context giúp mang lại một hệ thống bảo mật cao và rất linh hoạt cho đa thiết bị. Các generator của Rails 8 hỗ trợ rất nhiều phần cơ bản như session, mật khẩu, mailer, giúp bạn tập trung vào xây dựng UI và logic nghiệp vụ. Qua bài viết, bạn đã có cái nhìn tổng quan cùng hướng dẫn thực tiễn để bắt đầu triển khai authentication cho dự án API Rails + React, mở rộng và chỉnh sửa theo nhu cầu riêng.

Tham Khảo

Rails Security Guide

Official Rails 8 Authentication Documentation

rack-cors GitHub repository

Dev.to bài viết gốc về Rails 8 Auth (nguồn nội dung tham khảo)

React Fetch API Docs

June 30, 2024