#24 新しい認証方法に合わせたmiddlewareの作成をする

Author: HEKUCHAN

api/api/static.py

@@ -1,11 +1,11 @@
 import datetime
 from zoneinfo import ZoneInfo
 
-
 class Static:
     """Set the Static variables here."""
     ACCESS_TOKEN_EXPIRE_TIME = datetime.timedelta(minutes=15)
-    REFRESH_TOKEN_EXPIRE_TIME = datetime.timedelta(days=1)
+    #TODO: Refresh_tokenを無期限化する
+    REFRESH_TOKEN_EXPIRE_TIME = datetime.timedelta(days=900)
     TIME_ZONE = ZoneInfo("Asia/Tokyo")
 
 static = Static()

web/@types/axios.d.ts

@@ -0,0 +1,8 @@
+export type AccessTokenType = string;
+export type RefreshTokenType = string;
+
+export type CredentialsType = {
+  access_token: AccessTokenType,
+  refresh_token: RefreshTokenType,
+};
+

web/middleware.ts

@@ -1,20 +1,18 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { AccessTokenType, CredentialsType, RefreshTokenType } from './@types/axios';
+import { boolean } from 'yup';
 
-type RefreshTokenType = string;
-type AccessTokenType = string;
-const LoginPath = '/';
-
-async function refershToken(sessionId: RefreshTokenType): Promise<undefined | AccessTokenType> {
+const refreshAccessToken = async (refreshToken: RefreshTokenType): Promise<undefined | AccessTokenType> => {
   const token = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/token/refresh`, {
     method: 'POST',
     headers: {
       Accept: 'application/json',
-      'Content-Type': 'application/json',
+      "Content-Type": "application/json"
     },
     body: JSON.stringify({
-      session_id: sessionId,
+      refresh_token: refreshToken,
     }),
-  }).then((res) => (res.ok ? res : undefined));
+  }).then(res => res.ok ? res : undefined);
 
   if (token !== undefined) {
     const tokenData = await token.json();
@@ -23,80 +21,90 @@ async function refershToken(sessionId: RefreshTokenType): Promise<undefined | Ac
   return undefined;
 }
 
-async function checkAuth(accessToken: AccessTokenType): Promise<boolean> {
+const confirmAccessToken = async (accessToken: AccessTokenType): Promise<boolean> => {
   const isSucceeded = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users/me`, {
     method: 'GET',
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
       Authorization: `Bearer ${accessToken}`,
     },
-  }).then(async (res) => res.ok);
+  }).then(async res => res.ok);
 
-  return isSucceeded;
+  return isSucceeded
 }
 
-function redirectToLoginPage(request: NextRequest): NextResponse {
-  return NextResponse.redirect(new URL(LoginPath, request.url));
+const createNewUser = async (): Promise<CredentialsType | undefined> => {
+  const credentials = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, {
+    method: 'POST',
+    headers: {
+      Accept: 'application/json',
+      "Content-Type": "application/json"
+    }
+  }).then(res => res.ok ? res : undefined);
+
+  if (credentials !== undefined) {
+    const credentialsData = await credentials.json();
+    return credentialsData as CredentialsType
+  }
+  return undefined;
 }
 
-function redirectToHomePage(request: NextRequest): NextResponse {
-  return NextResponse.redirect(new URL('/', request.url));
+const whenNotAuthenticated = async (request: NextRequest ,response: NextResponse): Promise<NextResponse> => {
+  const credentials = await createNewUser()
+  if (credentials !== undefined) {
+    console.log(credentials)
+    response.cookies.set({
+      name: 'refresh_token',
+      value: credentials.refresh_token,
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'strict',
+      domain: request.nextUrl.domainLocale?.domain,
+    });
+  }
+  return response
 }
 
-async function middleware(request: NextRequest) {
+
+const middleware = async (request: NextRequest) => {
   const response = await NextResponse.next();
-  const refreshToken: RefreshTokenType | undefined = request.cookies.get('session_id')?.value;
-  let accessToken: AccessTokenType | undefined = request.cookies.get('access_token')?.value;
 
-  console.log(request.nextUrl.pathname);
-  if (request.nextUrl.pathname === LoginPath && accessToken !== undefined) {
-    if (await checkAuth(accessToken)) {
-      return redirectToHomePage(request);
+  const refreshToken: RefreshTokenType | undefined = request.cookies.get("refresh_token")?.value;
+  let accessToken: RefreshTokenType | undefined = request.cookies.get("access_token")?.value;
+
+  const isAuthenticated = async () => {
+    if (accessToken !== undefined && await confirmAccessToken(accessToken)) {
+      return true;
     }
 
     if (refreshToken !== undefined) {
-      accessToken = await refershToken(refreshToken);
-      console.log(accessToken);
-      if (accessToken !== undefined && (await checkAuth(accessToken))) {
-        return redirectToHomePage(request);
+      accessToken = await refreshAccessToken(refreshToken);
+
+      if (accessToken !== undefined && await confirmAccessToken(accessToken)) {
+        response.cookies.set({
+          name: 'access_token',
+          value: accessToken,
+          httpOnly: true,
+          secure: process.env.NODE_ENV === 'production',
+          sameSite: 'strict',
+          domain: request.nextUrl.domainLocale?.domain,
+        });
+        return true
       }
     }
+    return false;
   }
-  // If accessToken is not validated or null.
-  if (accessToken === undefined || (accessToken !== undefined && !(await checkAuth(accessToken)))) {
-    if (refreshToken !== undefined) {
-      accessToken = await refershToken(refreshToken);
-
-      // Check the accessToken was refreshed
-      if (
-        accessToken === undefined ||
-        (accessToken !== undefined && !(await checkAuth(accessToken)))
-      ) {
-        return redirectToLoginPage(request);
-      }
-      response.cookies.set({
-        name: 'access_token',
-        value: accessToken,
-        httpOnly: true,
-        secure: process.env.NODE_ENV === 'production',
-        sameSite: 'strict',
-        domain: request.nextUrl.domainLocale?.domain,
-      });
-    }
-
-    if (request.nextUrl.pathname !== LoginPath) {
-      return redirectToLoginPage(request);
-    }
 
-    return response;
+  if (!(await isAuthenticated())) {
+    return await whenNotAuthenticated(request, response)
   }
 
-  return response;
+  return response
 }
 
 export const config = {
-  matcher: [],
+  matcher: ['/((?!api|_next/static|favicon.ico).*)',],
 };
 
 export default middleware;