Tạm biệt Devise, Chào mừng Rails 8 Auth: Cùng Xây Dựng Hệ Thống Xác Thực Thần Tốc Với React và Rails API!

Lê Lân

24/07/2025

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

Mở Đầu

Sau nhiều năm sử dụng Devise, Rails 8 đã giới thiệu thư viện xác thực hoàn toàn mới với nhiều cải tiến về bảo mật và quản lý session. Đặc biệt khi phát triển ứng dụng React + Rails API, việc tích hợp xác thực trở nên thử thách hơn.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách Rails 8 xây dựng hệ thống xác thực người dùng và hướng dẫn chi tiết việc triển khai authentication cho một dự án React frontend kết hợp Rails API backend. Nội dung tập trung vào cấu trúc, luồng xử lý, cũng như cách giao tiếp giữa hai phần mềm. Lưu ý, chức năng reset mật khẩu sẽ được đề cập trong bài khác.

Rails 8 Auth - Tổng Quan Các Nguyên Tắc Cơ Bản

Authentication Concern

Mọi logic xác thực trong Rails 8 đều được chứa trong module concern Authentication :

Tạo và nạp session.

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

Cài đặt context Current cho từng request.

Mỗi yêu cầu đều yêu cầu xác thực thông qua callback require_authentication trừ khi được phép truy cập công khai qua allow_unauthenticated_access . Module cũng cung cấp helper authenticated? để kiểm tra trạng thái đăng nhập dễ dàng hơn trong views, thay thế cách dùng if current_user .

Để truy cập trực tiếp user object trong view, bạn cần expose Current.user bằng helper_method trong controller.

Session Lưu Trữ Trên CSDL (DB-Backed Sessions)

Thay vì lưu toàn bộ dữ liệu người dùng vào cookie, Rails lưu session sensitive (chẳng hạn user_id ) trên bảng sessions trong cơ sở dữ liệu.

Ưu điểm	Mô Tả
Bảo mật hơn	Dữ liệu người dùng lưu server, cookie client chỉ chứa `session_id`
Hỗ trợ đa thiết bị	Một user có thể có nhiều session trên các thiết bị khác nhau
Lưu thêm thông tin	Ghi lại user agent, IP,... trong bản ghi session

Cookie session được thiết lập trong method start_new_session_for(user) của Authentication module với các thuộc tính: httponly: true , same_site: :lax , secure (production).

Request Context Qua `Current`

Rails 8 tạo ra lớp singleton request-scoped Current kế thừa ActiveSupport::CurrentAttributes để lưu trữ thông tin session & user một cách thread-safe trong vòng đời 1 request HTTP.

Current.session chứa session hiện tại.

Current.user là user được authenticated tương ứng (được ủy quyền từ session).

Điều này giúp toàn bộ app có thể truy cập user & session mà không cần truyền tham số phức tạp.

Triển Khai Rails 8 Authentication Backend

1. Tạo Authentication Cơ Bản

Chạy lệnh:

bin/rails generate authentication
bin/rails db:migrate

Generator tạo:

Model User với has_secure_password (bcrypt).

Model Session quản lý phiên làm việc.

Module Authentication và controller Passwords , Sessions .

Mailers và views liên quan password reset.

Cần tự tạo controllers và views cho việc đăng ký (sign up) và quản lý users vì generator không tạo sẵn.

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

Cài gem rack-cors để cho phép React app (đang chạy ở origin khác) truy cập API Rails:

# 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: [:get, :post, :put, :patch, :delete, :options, :head],
      credentials: true
  end
end

Trong controller gốc:

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

3. Viết Controllers API

Api::UsersController cho đăng ký user.

Api::SessionsController quản lý phiên đăng nhập.

class Api::UsersController < ApplicationController
  allow_unauthenticated_access only: [: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

class Api::SessionsController < ApplicationController
  allow_unauthenticated_access only: [: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 Nghĩa Route

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

React Frontend Tích Hợp Với Rails 8 Auth

1. Cấu Hình Proxy Để Giao Tiếp Với API

Nếu dùng Vite (React 19.1), cấu hình proxy trong vite.config.js :

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

Hoặc trong package.json (Create React App):

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

2. Xây Dựng Các API Calls

Ví dụ trong component AuthForm.jsx xử lý đăng ký và đăng nhập:

Sign Up

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 error"))

Sign In

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 error"))

Xác Thực Phiên Đăng Nhập Hiện Tại

Khi App.jsx mount hoặc reload trang, dùng useEffect gọi:

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))

Sign Out

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")
    }
  })

Lưu ý: Tham số credentials: 'include' rất quan trọng để đảm bảo cookie session được gửi kèm theo request.

Những Điểm Cần Lưu Ý Khi Đưa Vào Production

Triển khai cả backend Rails và frontend React trên HTTPS.

Đặt cấu hình trusted_origins chính xác cho môi trường dev và prod.

Nếu sử dụng subdomain, thiết lập thuộc tính cookie domain đúng.

Tiếp tục phát triển thêm UI và backend cho chức năng reset mật khẩu.

Viết các mailer đăng ký mới người dùng.

Trừu tượng hóa và tái sử dụng code gọi API trong React (custom hooks).

Kết Luận

Rails 8 cung cấp một thư viện xác thực hiện đại với nhiều cải tiến mạnh mẽ, tối ưu bảo mật bằng session lưu trên server và model request context thông minh qua Current . Việc tích hợp với frontend React qua API rất dễ dàng và an toàn nếu bạn làm đúng các bước cấu hình.

Bạn đã có một bộ khung authentication đầy đủ gồm đăng ký, đăng nhập, xác thực phiên làm việc và đăng xuất để phát triển ứng dụng React + Rails API. Với nền tảng này, bạn có thể mở rộng thêm các chức năng nâng cao như reset mật khẩu hay xác thực đa yếu tố theo nhu cầu.

Bạn có thể tham khảo thêm tài liệu chính thức của Rails và giữ liên hệ để trao đổi các cải tiến về code!

Tham Khảo

Ruby on Rails Security Guide June 1, 2024

Dev.to bài viết về Rails 8 Authentication (Nguồn gốc nội dung)

Rails API Documentation và ActiveSupport::CurrentAttributes

React JS Official Documentation về fetch và proxy

Rack CORS GitHub Repository: https://github.com/cyu/rack-cors