Auth0 Bài 3: Khởi tạo Tenant đầu tiên và cấu hình môi trường Development.

Lý thuyết đã đủ, bây giờ là lúc chúng ta xắn tay áo lên và thực hành. Trong bài này, chúng ta sẽ cùng nhau tạo tài khoản Auth0, thiết lập "tòa nhà" (Tenant) đầu tiên và cấu hình một số thông số cốt lõi để chuẩn bị cho việc tích hợp code ở các bài sau.

Dưới đây là các bước chi tiết để bạn thiết lập môi trường Development chuẩn xác ngay từ đầu.

1. Đăng ký tài khoản và tạo Tenant: Chọn Region cẩn thận

• Đăng ký: Truy cập trang chủ auth0.com và bấm nút Sign Up. Auth0 cung cấp gói Free (miễn phí) rất hào phóng, đủ cho hầu hết các dự án cá nhân và môi trường dev (lên tới 7,500 user active mỗi tháng).
• Tạo Tenant: Sau khi đăng nhập (bạn có thể dùng Github hoặc Google account), hệ thống sẽ yêu cầu bạn tạo Tenant đầu tiên:
  • Tenant Domain: Tên này sẽ xuất hiện trên URL lúc người dùng đăng nhập. Lời khuyên là hãy thêm hậu tố -dev cho môi trường hiện tại (ví dụ: myawesomeapp-dev). Tên miền đầy đủ của bạn sẽ có dạng myawesomeapp-dev.us.auth0.com.
  • Region (Khu vực lưu trữ): Rất quan trọng! Bạn nên chọn server gần với server ứng dụng của bạn nhất để giảm độ trễ (latency). Ví dụ, nếu server backend của bạn đặt tại Mỹ, hãy chọn US. Nếu đặt tại Châu Á hoặc Úc, hãy chọn AU (Australia). Bạn không thể thay đổi Region sau khi Tenant đã được tạo.

2. Làm quen với Dashboard: Định vị 4 khái niệm cốt lõi

Sau khi tạo xong, bạn sẽ được đưa vào giao diện Auth0 Dashboard. Hãy nhìn sang menu thanh bên trái, đây là "bảng điều khiển trung tâm" của tòa nhà:

• Applications > Applications: Nơi bạn sẽ khai báo các ứng dụng Frontend (React, Vue, iOS).
• Applications > APIs: Nơi bạn định nghĩa các Backend Server (Node.js, Spring Boot) cần được bảo vệ.
• Authentication > Database / Social: Nơi bật/tắt tính năng đăng nhập bằng Mật khẩu (Database) hoặc Google/Facebook (Social).
• User Management > Users: Nơi quản lý, xem thông tin và khóa/mở khóa tài khoản của người dùng thực tế.

3. Khai báo Application đầu tiên: Tạo lối vào (Client)

Dù chưa viết code, chúng ta vẫn cần tạo sẵn một "khai sinh" cho ứng dụng trên Auth0:

1. Vào Applications > Applications.
2. Bấm nút Create Application.
3. Đặt tên (ví dụ: My React Frontend).
4. Chọn loại ứng dụng: Nếu bạn định làm web tĩnh (React/Vue/Angular), chọn Single Page Web Applications. Nếu làm web server-side (Next.js, Node.js), chọn Regular Web Applications.
5. Bấm Create.

Hệ thống sẽ chuyển bạn đến tab Settings của ứng dụng vừa tạo. Hãy ghi nhớ hai thông số cực kỳ quan trọng ở đây: Domain và Client ID. Bạn sẽ dùng chúng để đưa vào file .env trong source code sau này.

4. Cấu hình các URL bắt buộc

Vẫn ở trong tab Settings của Application, bạn cuộn xuống phần Application URIs. Đây là phần nhiều người mới thường quên cấu hình nhất, dẫn đến lỗi khi chạy code:

• Allowed Callback URLs: Khi user đăng nhập thành công trên trang của Auth0, Auth0 sẽ redirect (chuyển hướng) họ về lại web của bạn. Bạn PHẢI khai báo đường dẫn web của bạn ở đây (ví dụ môi trường dev là: http://localhost:3000). Nếu không khai báo, Auth0 sẽ chặn redirect để đề phòng hacker lừa chuyển hướng user sang trang giả mạo.
• Allowed Logout URLs: Tương tự, sau khi user bấm đăng xuất, họ sẽ được trả về URL nào? (Ví dụ: http://localhost:3000).
• Allowed Web Origins: Khai báo để tránh lỗi CORS khi Frontend gọi ngầm đến Auth0 (Khai báo: http://localhost:3000).

Khai báo xong, kéo xuống dưới cùng và bấm Save Changes.

💡 Mẹo vận hành (Best Practices) cho môi trường Dev

1. Sử dụng kết nối mặc định (Default Connection): Khi mới tạo Tenant, Auth0 tự động tạo sẵn cho bạn một Database có tên là Username-Password-Authentication và một kết nối Social là Google. Đây là dữ liệu dùng thử để bạn test ngay. Hãy cứ giữ nguyên chúng cho môi trường Dev.
2. Đừng tạo User thật trên Dev: Vào menu User Management > Users, bạn có thể bấm Create User để tự tạo bằng tay vài tài khoản test (ví dụ: testuser1@example.com). Việc này giúp bạn không phải đăng ký đi đăng ký lại từ đầu lúc viết code Backend.
3. Hiểu về luồng đi của Token: Hiện tại, "cánh cửa" (Application) và "khóa" (Auth0 Tenant) đã sẵn sàng. Câu hỏi tiếp theo là: Khi user nhập mật khẩu thành công, Auth0 làm cách nào để báo cho ứng dụng của bạn biết một cách an toàn mà không sợ bị giả mạo? Đó là lúc chúng ta phải nhắc đến các "luồng xác thực" (Authentication Flows). Tùy vào việc ứng dụng của bạn là React (chạy trên trình duyệt của người dùng) hay Next.js (chạy trên Server của bạn), cách gửi nhận Token sẽ hoàn toàn khác nhau để đảm bảo an toàn.