Tạm Biệt Devise, Chào Mừng Rails 8 Auth: Xây Dựng Xác Thực React + Rails API Cực Dễ!

Lê Lân

11/07/2025

Hướng Dẫn Triển Khai Xác Thực Người Dùng Với Rails 8 cho Ứng Dụng React + Rails API

Mở Đầu

Rails 8 vừa ra mắt với thư viện xác thực người dùng hoàn toàn mới, đem lại nhiều cải tiến đáng kể so với Devise truyền thống. Tuy nhiên, cách triển khai trong các ứng dụng React + Rails API có nhiều điểm khác biệt cần lưu ý.

Nếu bạn đã quen sử dụng Devise và đang muốn khám phá cách Rails 8 xử lý xác thực ra sao, bài viết này sẽ là hướng dẫn chi tiết. Bài viết tập trung phân tích các nguyên lý cốt lõi của Rails 8 auth, đồng thời cung cấp bước thực hiện thực tế với React làm frontend và Rails 8 tạo API backend. Phần reset mật khẩu sẽ được đề cập trong bài viết riêng.

Rails 8 Auth - Những Nguyên Lý Tổng Quan

Authentication Concern – Module Cốt Lõi

Rails 8 tập trung phần lớn logic xác thực vào module concern có tên Authentication. Module này chịu trách nhiệm:

Tạo và tải phiên đăng nhập (session)

Xác thực người dùng

Đặt bối cảnh hiện hành (Current)

Module chạy phương thức require_authentication dưới dạng before_action cho tất cả action trong controller. Để miễn một action khỏi kiểm tra xác thực, ta dùng allow_unauthenticated_access .

Ngoài ra, concern cung cấp helper authenticated? , có thể dùng trong view để kiểm tra trạng thái đăng nhập, thay thế dần cho pattern if current_user .

Để truy cập thông tin user trong view, bạn cần expose đối tượng user qua helper_method thủ công.

Phiên Đăng Nhập Lưu Trữ Trên Cơ Sở Dữ Liệu (DB-Backed Sessions)

Không như cookie-based session thông thường, Rails 8 lưu dữ liệu nhạy cảm như user_id trong bảng sessions trên server, chỉ gửi session_id trong cookie phía client:

Bảo mật hơn: Dữ liệu người dùng không bị lộ ra client.

Hỗ trợ đa thiết bị: Cho phép nhiều session cùng lúc.

Ghi nhận thông tin: Lưu IP, user agent để quản lý phiên hiệu quả.

Quản Lý Bối Cảnh Yêu Cầu Qua `Current`

Current trong Rails 8 kế thừa từ ActiveSupport::CurrentAttributes , là một singleton kiểu thread-safe, giữ trạng thái phiên và user trong suốt vòng đời một request.

Giá trị trong Current không bị rò rỉ giữa các yêu cầu khác nhau, cũng như đa luồng. Module Authentication thiết lập Current.session và Current.user để truy cập toàn cục dễ dàng mà không cần truyền tham số thủ công.

Triển Khai Thực Tế

1. Tạo hệ thống Xác thực Rails

Chạy lệnh:

bin/rails generate authentication
bin/rails db:migrate

Đặc điểm:

Thành phần	Chức năng
Model `User`	Quan hệ one-to-many với `sessions` , dùng `has_secure_password` với `bcrypt` .
Model `Session`	Lưu dữ liệu session, quan hệ `belongs_to :user` .
Model `Current`	Quản lý bối cảnh request (không dùng bảng DB).
Controllers	`SessionsController` , `PasswordsController` để xử lý đăng nhập, đặt lại mật khẩu...
Concern Authentication	Xử lý logic xác thực và cookies session.

Module generator chưa tạo controller UsersController để đăng ký (sign up), bạn cần viết thêm.

Đọc kỹ module Authentication concern giúp hiểu rõ cách User , Session và Current phối hợp tạo nên hệ thống xác thực.

2. Cấu hình CORS và CSRF

Thêm Gem CORS

Thêm gem rack-cors vào Gemfile:

gem 'rack-cors'

Chạy bundle install , sau đó tạo file config/initializers/cors.rb :

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins Rails.credentials.trusted_origins
    resource "*",
      headers: :any,
      methods: %i[get post put patch delete options head],
      credentials: true
  end
end

Cấu hình trusted_origins trong credentials cho cả dev và prod.

Cấu hình CSRF trong `ApplicationController`

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception

  private

  def verified_request?
    origins = Rails.application.credentials.trusted_origins || []
    valid = super || origins.include?(request.origin)
    Rails.logger.warn("Blocked CSRF request from #{request.origin}") unless valid
    valid
  end
end

Cho phép Rails xử lý đúng các yêu cầu từ React server bằng cách xác thực origin.

3. Xây dựng Controllers cho React API

`Api::UsersController`

Xử lý đăng ký tài khoản mới:

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

`Api::SessionsController`

Xử lý đăng nhập, kiểm tra phiên và đă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
    begin
      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
end

4. Định tuyến (Routing)

Thêm vào config/routes.rb :

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

5. Frontend React – Cấu Hình và Triển Khai Fetch

5.1 Proxy lên Rails Server

Nếu dùng Vite:

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
}

Nếu dùng Create React App, thêm proxy trong package.json :

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

5.2 Xây dựng Fetch gọi API

Tạo component AuthForm.jsx quản lý cả đăng nhập và đăng ký.

Đăng ký tài khoản:

fetch("/api/user", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    user: {
      email_address: e.target.email_address.value,
      password: e.target.password.value,
      password_confirmation: e.target.password_confirmation.value,
    },
  }),
})
.then(async res => {
  const data = await res.json();
  if (res.ok) {
    setIsSignUp(false);
    showAlert(data.notice);
  } else {
    showAlert(data.errors ? data.errors.join(", ") : "Sign up failed");
  }
})
.catch(err => {
  showAlert(err.message || "Sign up failed");
});

Đăng nhập:

fetch("/api/session", {
  method: "POST",
  credentials: "include",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    email_address: e.target.email_address.value,
    password: e.target.password.value,
  }),
})
.then(async res => {
  const data = await res.json();
  if (res.ok) {
    handleSignIn(data);
    showAlert(data.notice);
  } else {
    showAlert(data.error || "Sign in failed");
  }
})
.catch(err => {
  showAlert(err.message || "Sign in failed");
});

Kiểm tra phiên đăng nhập hiện tại (App.jsx):

useEffect(() => {
  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(false);
        setAuthChecked(true);
        showAlert(data.error || "Authentication failed");
      }
    })
    .catch(() => setAuthChecked(true));
}, []);

Đăng xuất:

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(', ') : "Log out failed");
    }
  });

Chú ý credentials: 'include' để trình duyệt gửi và nhận cookies xác thực.

Các Lưu Ý Khi Đưa Vào Môi Trường Thực Tế

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

Cấu hình trusted_origins đúng cho môi trường phát triển và sản xuất.

Nếu dùng subdomain, cấu hình domain cookie phù hợp để chia sẻ cookie giữa các tên miền phụ.

Phát triển giao diện đặt lại mật khẩu và tận dụng module reset mật khẩu của Rails 8 auth.

Tách riêng fetch xác thực ra hook riêng để tái sử dụng và tối ưu mã.

Xây dựng thêm controller RegistrationsController nếu muốn mở rộng tính năng đăng ký.

Thêm mailer để kiểm soát email đăng ký và reset.

Kết Luận

Rails 8 mang đến cách tiếp cận hiện đại, bảo mật và mô đun hóa hơn trong việc xây dựng xác thực người dùng, rất phù hợp với kiến trúc API và frontend tách biệt như React. Việc sử dụng DB-backed sessions và Current giúp quản lý phiên cũng như user context hiệu quả.

Việc tích hợp Rails 8 auth vào dự án React + Rails API tuy có nhiều bước cấu hình và tùy chỉnh cần làm, nhưng lại tạo nền tảng ổn định và dễ bảo trì cho hệ thống xác thực dài hạn. Đừng quên phối hợp CORS, CSRF và cookie đúng cách để tránh lỗi bảo mật hoặc bất thường trong UX.

Hãy bắt đầu thử với hướng dẫn trên và dần hoàn thiện tính năng để tận dụng tối đa lợi ích mà Rails 8 auth mang lại.

Tham Khảo

Rails Security Guide - Authentication

Rails 8 Authentication API Documentation

Rack CORS Gem

React Official Documentation

Dev.to bài viết gốc về Rails 8 auth integration (cập nhật 2024)