구글 Oauth 로그인 기능 추가

Author: LimSB-dev

README.md

@@ -22,3 +22,9 @@ Canary Lab is a technology blog where we explore the latest trends, share insigh
 
 - Built with Next.js, a React-based framework for building modern web applications.
 - Responsive design for optimal viewing experience across devices.
+- OAuth login: GitHub, Google (optional).
+
+## Environment Variables (OAuth)
+
+- **GitHub**: `AUTH_GITHUB_ID`, `AUTH_GITHUB_SECRET`
+- **Google**: `AUTH_GOOGLE_ID`, `AUTH_GOOGLE_SECRET` (Google Cloud Console에서 OAuth 2.0 클라이언트 ID 생성 후 설정)

next.config.js

@@ -10,10 +10,13 @@ const withPWA = require("next-pwa")({
 const nextConfig = {
   images: {
     domains: [
-      "*",
       "mazassumnida.wtf",
       "openweathermap.org",
       "avatars.githubusercontent.com",
+      "lh3.googleusercontent.com",
+      "lh4.googleusercontent.com",
+      "lh5.googleusercontent.com",
+      "lh6.googleusercontent.com",
     ],
   },
   env: {},

public/assets/oauth/google_light_default.svg

@@ -13,20 +13,34 @@ const LoginPageForm = async () => {
       <UserProfile user={user} />
     </div>
   ) : (
-    <form
-      className={styles.form}
-      // React 타입(구버전) 환경에서 server action 타입에러 회피
-      action={
-        (async () => {
-          "use server";
-          await signIn("github");
-        }) as any
-      }
-    >
-      <button className={styles.button} type="submit">
-        <OauthLoginButton provider="github" theme="light" type="default" />
-      </button>
-    </form>
+    <div className={styles.form}>
+      <form
+        className={styles.button_wrapper}
+        action={
+          (async () => {
+            "use server";
+            await signIn("github");
+          }) as any
+        }
+      >
+        <button className={styles.button} type="submit">
+          <OauthLoginButton provider="github" theme="light" type="default" />
+        </button>
+      </form>
+      <form
+        className={styles.button_wrapper}
+        action={
+          (async () => {
+            "use server";
+            await signIn("google");
+          }) as any
+        }
+      >
+        <button className={styles.button} type="submit">
+          <OauthLoginButton provider="google" theme="light" type="default" />
+        </button>
+      </form>
+    </div>
   );
 };
 

src/components/login/form/LoginPageForm.tsx

@@ -24,6 +24,10 @@
   padding: 20px;
 }
 
+.button_wrapper {
+  display: block;
+}
+
 .button {
   all: unset;
   cursor: pointer;

src/components/login/form/styles.module.scss

@@ -1,7 +1,7 @@
 import Image from "next/image";
 
 interface IOauthLoginButton {
-  provider: "github";
+  provider: "github" | "google";
   theme: "light" | "dark";
   type: "default";
 }