From 3ebae75689ae0dbd865e9e74054c4d6fdca96769 Mon Sep 17 00:00:00 2001
From: HeesungB <hezo25@naver.com>
Date: Thu, 1 Dec 2022 17:33:51 +0900
Subject: [PATCH] add: verification page

---
 pages/index.tsx              | 15 +++++++++++----
 pages/verification/index.tsx | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 pages/verification/index.tsx

diff --git a/pages/index.tsx b/pages/index.tsx
index b16b43f..94b5cc0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,15 +1,22 @@
 import styles from "../styles/Home.module.css";
+import { useEffect } from "react";
+
+interface AuthResponse {
+  authUrl: string;
+}
 
 export default function Home() {
-  const handleSigninWithTwitter = async () => {
-    const { authUrl } = await (await fetch("/api/auth")).json();
+  const handleSignInWithTwitter = async () => {
+    const response: AuthResponse = await (await fetch("/api/auth")).json();
 
-    window.open(authUrl);
+    window.location.href = response.authUrl;
   };
 
   return (
     <div className={styles.container}>
-      <button onClick={handleSigninWithTwitter}>Sign in with Twitter</button>
+      <div>
+        <button onClick={handleSignInWithTwitter}>Sign in with Twitter</button>
+      </div>
     </div>
   );
 }
diff --git a/pages/verification/index.tsx b/pages/verification/index.tsx
new file mode 100644
index 0000000..1cd0b88
--- /dev/null
+++ b/pages/verification/index.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+
+interface AccessTokenResponse {
+  access_token: string;
+}
+
+export default function VerificationPage() {
+  const [accessToken, setAccessToken] = useState<string>();
+
+  const fetchAccessToken = async (state: string, code: string) => {
+    const response: AccessTokenResponse = await (
+      await fetch(`/api/auth/access-token?state=${state}&code=${code}`)
+    ).json();
+
+    setAccessToken(response.access_token);
+  };
+
+  useEffect(() => {
+    const [, state, code] =
+      window.location.search.match(
+        /^(?=.*state=([^&]+)|)(?=.*code=([^&]+)|).+$/,
+      ) || [];
+
+    fetchAccessToken(state, code);
+  }, []);
+
+  return (
+    <div>
+      <div>{accessToken}</div>
+    </div>
+  );
+}