PagLàm chức năng đăng ký bằng google cho nextjs typescript với wordpress. bằng gói graphql-request

Bạn có thể sử dụng NextAuth.js để tích hợp đăng ký/login bằng Google cho Next.js (App Router) với WordPress (WPGraphQL). Tuy nhiên, có một vấn đề cần xử lý nếu WordPress yêu cầu password khi tạo tài khoản mới.

---

🔹 Các bước chính

1. Cấu hình Google OAuth trên Google Cloud Console

2. Cấu hình NextAuth.js với Google Provider

3. Xử lý đăng ký trong WordPress (nếu cần password)

4. Cập nhật database WordPress với user mới

5. Lưu token xác thực vào session NextAuth

---

🔹 Bước 1: Tạo Google OAuth Credentials

• Truy cập Google Cloud Console

• Tạo OAuth 2.0 Credentials

• Cấu hình Redirect URI:

  bashCopyEdithttp://localhost:3000/api/auth/callback/google

• Lấy Client ID và Client Secret để sử dụng trong NextAuth.

---

🔹 Bước 2: Cấu hình NextAuth.js với Google Provider

Tạo file /app/api/auth/[...nextauth]/route.ts:

typescriptCopyEditimport NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { NextAuthOptions } from "next-auth";
import { createUserIfNotExists } from "@/lib/wordpress"; // Hàm xử lý đăng ký WordPress

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async signIn({ user, account, profile }) {
      if (account?.provider === "google") {
        // Kiểm tra & tạo user nếu chưa có trong WordPress
        const wordpressUser = await createUserIfNotExists(user.email!, user.name!);
        if (!wordpressUser) {
          return false; // Ngăn chặn đăng nhập nếu tạo user thất bại
        }
      }
      return true;
    },
    async session({ session, token }) {
      // Gắn thông tin WordPress User vào session
      session.user.id = token.id;
      session.user.token = token.accessToken;
      return session;
    },
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
        token.accessToken = user.accessToken;
      }
      return token;
    },
  },
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

---

🔹 Bước 3: Xử lý tạo tài khoản trong WordPress

Nếu WordPress yêu cầu password, ta sẽ tự động tạo password ngẫu nhiên và gửi request đến WPGraphQL để đăng ký.

Tạo file /lib/wordpress.ts:

typescriptCopyEditimport { gql } from "graphql-request";
import { graphQLClient } from "@/lib/graphql-client";

// Hàm tạo user nếu chưa tồn tại trong WordPress
export async function createUserIfNotExists(email: string, name: string) {
  // Kiểm tra user đã tồn tại chưa
  const existingUser = await getWordPressUser(email);
  if (existingUser) return existingUser;

  // Tạo mật khẩu ngẫu nhiên (nếu WordPress yêu cầu password)
  const randomPassword = Math.random().toString(36).slice(-8);

  // Gửi request đăng ký user mới
  const mutation = gql`
    mutation RegisterUser($email: String!, $name: String!, $password: String!) {
      registerUser(input: { username: $email, email: $email, name: $name, password: $password }) {
        user {
          id
          jwtAuthToken
        }
      }
    }
  `;

  try {
    const response = await graphQLClient.request(mutation, {
      email,
      name,
      password: randomPassword,
    });

    return response?.registerUser?.user || null;
  } catch (error) {
    console.error("WordPress Registration Error:", error);
    return null;
  }
}

// Hàm kiểm tra user đã tồn tại trong WordPress
async function getWordPressUser(email: string) {
  const query = gql`
    query GetUser($email: String!) {
      user(where: { email: $email }) {
        id
        jwtAuthToken
      }
    }
  `;

  try {
    const response = await graphQLClient.request(query, { email });
    return response?.user || null;
  } catch (error) {
    console.error("WordPress User Check Error:", error);
    return null;
  }
}

---

🔹 Bước 4: Cập nhật Token WordPress vào NextAuth Session

Chỉnh lại callback jwt() để lưu JWT từ WordPress vào NextAuth:

typescriptCopyEditasync jwt({ token, user }) {
  if (user) {
    token.id = user.id;
    token.accessToken = user.jwtAuthToken; // Lưu token WordPress vào session
  }
  return token;
}

---

🔹 Bước 5: Hiển thị Thông Tin User Trong Next.js

Sau khi đăng nhập, bạn có thể hiển thị thông tin user bằng useSession().

Ví dụ: /app/profile/page.tsx

tsxCopyEdit"use client";
import { useSession, signOut } from "next-auth/react";

export default function ProfilePage() {
  const { data: session } = useSession();

  if (!session) return <p>Loading...</p>;

  return (
    <div>
      <h1>Welcome, {session.user?.name}!</h1>
      <p>Email: {session.user?.email}</p>
      <p>WordPress Token: {session.user?.token}</p>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
}

---

🔹 Tóm tắt

✅ Sử dụng Google OAuth với NextAuth.js ✅ Tự động đăng ký user vào WordPress nếu chưa tồn tại ✅ Tạo password ngẫu nhiên nếu WordPress yêu cầu ✅ Lưu token WordPress vào session

Cách này giúp bạn đăng ký & đăng nhập tự động mà không cần nhập password! 🚀

4o