Người dùng đã có, không cần đăng nhập lại qua WordPress tôi muốn chuyển qua trang khác đọc thêm
Để xử lý trường hợp người dùng đã tồn tại trong WordPress và không cần đăng nhập lại, sau khi xác thực qua Google bằng NextAuth.js, bạn có thể chuyển hướng họ đến một trang khác (ví dụ: trang dashboard hoặc trang chính) mà không yêu cầu đăng nhập lại qua WordPress. Dưới đây là cách thực hiện trong Next.js với TypeScript:
Ý tưởng chính
Sử dụng callback signIn trong NextAuth.js để kiểm tra xem người dùng đã tồn tại trong WordPress hay chưa.
Nếu người dùng đã tồn tại, lưu thông tin phiên (session) và chuyển hướng đến trang mong muốn thay vì yêu cầu đăng nhập lại.
Sử dụng redirect trong NextAuth hoặc điều hướng thủ công bằng next/router.
Bước 1: Cập nhật cấu hình NextAuth.jsSửa file pages/api/auth/[...nextauth].ts để kiểm tra người dùng và chuyển hướng:typescript
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import axios from "axios";
import { NextApiRequest, NextApiResponse } from "next";
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID!,
clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
}),
],
callbacks: {
async signIn({ user, account, profile }) {
try {
const wpApiUrl = `${process.env.WORDPRESS_API_URL}/wp/v2/users`;
const wpResponse = await axios.get(`${wpApiUrl}?search=${user.email}`, {
headers: {
Authorization: `Bearer your-jwt-token`, // Thay bằng token thực tế
},
});
if (wpResponse.data.length > 0) {
// Người dùng đã tồn tại trong WordPress
user.id = wpResponse.data[0].id; // Lưu ID từ WordPress vào user object
return true; // Cho phép đăng nhập
} else {
// Tạo người dùng mới nếu cần (tùy yêu cầu)
const newUser = await axios.post(
wpApiUrl,
{
username: user.email?.split("@")[0],
email: user.email,
password: generateRandomPassword(),
name: user.name,
},
{
headers: {
Authorization: `Bearer your-jwt-token`,
},
}
);
user.id = newUser.data.id;
return true;
}
} catch (error) {
console.error("Error with WordPress integration:", error);
return false;
}
},
async redirect({ url, baseUrl }) {
// Chuyển hướng sau khi đăng nhập thành công
return `${baseUrl}/dashboard`; // Trang bạn muốn chuyển đến
},
async jwt({ token, user }) {
if (user) {
token.id = user.id; // Lưu ID người dùng vào token
}
return token;
},
async session({ session, token }) {
session.user.id = token.id as string; // Gắn ID vào session
return session;
},
},
});
// Hàm sinh mật khẩu ngẫu nhiên (nếu cần)
function generateRandomPassword() {
return Math.random().toString(36).slice(-8);
}
Giải thích:
Trong callback signIn, nếu người dùng đã tồn tại trong WordPress, không cần yêu cầu đăng nhập lại, chỉ cần trả về true.
Callback redirect sẽ chuyển hướng người dùng đến trang /dashboard (hoặc bất kỳ trang nào bạn muốn) sau khi đăng nhập thành công.
Bước 2: Tạo trang đích (ví dụ: Dashboard)Tạo file pages/dashboard.tsx:typescript
import { useSession, signOut } from "next-auth/react";
export default function Dashboard() {
const { data: session, status } = useSession();
if (status === "loading") {
return <p>Đang tải...</p>;
}
if (!session) {
return <p>Bạn cần đăng nhập để truy cập trang này.</p>;
}
return (
<div>
<h1>Chào mừng đến Dashboard!</h1>
<p>Xin chào, {session.user?.name}</p>
<p>Email: {session.user?.email}</p>
<p>ID WordPress: {session.user?.id}</p>
<button onClick={() => signOut()}>Đăng xuất</button>
</div>
);
}
Giải thích: Trang này hiển thị thông tin người dùng từ session và cho phép đăng xuất.
Bước 3: Điều hướng thủ công (tùy chọn)Nếu bạn muốn kiểm soát việc điều hướng ở phía client (thay vì dùng callback redirect), bạn có thể sử dụng useRouter từ next/router. Sửa file pages/index.tsx:typescript
import { signIn, useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect } from "react";
export default function Home() {
const { data: session, status } = useSession();
const router = useRouter();
useEffect(() => {
if (status === "authenticated") {
// Nếu đã đăng nhập, chuyển hướng đến dashboard
router.push("/dashboard");
}
}, [status, router]);
if (status === "loading") {
return <p>Đang tải...</p>;
}
if (session) {
return null; // Không hiển thị gì vì sẽ chuyển hướng
}
return (
<div>
<button onClick={() => signIn("google")}>Đăng nhập bằng Google</button>
</div>
);
}
Giải thích:
useSession kiểm tra trạng thái đăng nhập.
useEffect chạy khi trạng thái thay đổi và chuyển hướng đến /dashboard nếu người dùng đã đăng nhập.
Bước 4: Bảo vệ trang Dashboard (tùy chọn)Nếu bạn muốn đảm bảo chỉ người dùng đã đăng nhập mới truy cập được /dashboard, thêm middleware hoặc kiểm tra trong getServerSideProps:Sử dụng getServerSideProps:Sửa pages/dashboard.tsx:typescript
