add: verification page

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>
   );
 }

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>
+  );
+}