Merge pull request #126 from aiji42/fix/preflight

fix: handle fallback on preflight

example/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

example/package.json

@@ -9,24 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@auth0/nextjs-auth0": "^1.6.1",
+    "@auth0/nextjs-auth0": "^1.6.2",
     "@geist-ui/react": "^2.2.0",
     "@geist-ui/react-icons": "^1.0.1",
-    "aws-amplify": "^4.3.8",
-    "firebase": "^9.5.0",
-    "firebase-admin": "^10.0.0",
+    "aws-amplify": "^4.3.11",
+    "firebase": "^9.6.1",
+    "firebase-admin": "^10.0.1",
     "js-cookie": "^3.0.1",
-    "next": "12.0.4",
-    "next-fortress": "^3.2.0-beta.2",
+    "next": "12.0.7",
+    "next-fortress": "3.2.1-beta.1",
     "nookies": "^2.5.2",
     "react": "^17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.1",
-    "@types/react": "17.0.36",
-    "eslint": "8.3.0",
-    "eslint-config-next": "12.0.4",
-    "typescript": "4.5.2"
+    "@types/react": "17.0.37",
+    "eslint": "8.5.0",
+    "eslint-config-next": "12.0.7",
+    "typescript": "4.5.4"
   }
 }

example/src/lib/authReducer.ts

@@ -3,9 +3,20 @@ const initialState = {}
 const reducer = (state: any, action: any) => {
   switch (action.type) {
     case 'login':
+      action.payload.user.getIdToken().then((id: string) => {
+        return fetch('/api/firebase/create-token', {
+          method: 'POST',
+          body: JSON.stringify({ id })
+        })
+      })
       return action.payload.user
     case 'logout':
-      document.location.replace('/firebase')
+      fetch('/api/firebase/destroy-token', {
+        method: 'POST'
+      }).then(() => {
+        document.location.reload()
+      })
+
       return initialState
     default:
       return state

example/src/lib/firebase.ts

@@ -4,8 +4,8 @@ import {
   GoogleAuthProvider,
   signInWithPopup,
   onAuthStateChanged,
-  signOut,
-  signInAnonymously
+  signInAnonymously,
+  signOut
 } from 'firebase/auth'
 
 export const config = {
@@ -23,44 +23,24 @@ export const auth = getAuth(firebaseApp)
 
 export const login = () => {
   const provider = new GoogleAuthProvider()
-  signInWithPopup(auth, provider)
-    .then((result) => {
-      return result
-    })
-    .catch(function (error) {
-      console.log(error)
-      const errorCode = error.code
-      console.log(errorCode)
-      const errorMessage = error.message
-      console.log(errorMessage)
-    })
+  signInWithPopup(auth, provider).then(console.log).catch(console.error)
 }
 
 export const listenAuthState = (dispatch: any) => {
   return onAuthStateChanged(auth, async function (user) {
     if (user) {
-      // User is signed in.
-      const id = await user.getIdToken()
-      await fetch('/api/firebase/login', {
-        method: 'POST',
-        body: JSON.stringify({ id })
-      })
       dispatch({
         type: 'login',
         payload: {
           user
         }
       })
-    } else {
-      // User is signed out.
-      await fetch('/api/firebase/logout', {
-        method: 'POST'
-      })
-      await signInAnonymously(auth)
-      dispatch({
-        type: 'logout'
-      })
+      return
     }
+    await signInAnonymously(auth)
+    dispatch({
+      type: 'logout'
+    })
   })
 }
 
@@ -69,7 +49,5 @@ export const firebaseUser = () => {
 }
 
 export const logout = () => {
-  signOut(auth).then(() => {
-    window.location.reload()
-  })
+  signOut(auth).then(console.log)
 }

example/src/pages/api/firebase/destroy-token.ts

@@ -0,0 +1,14 @@
+import { NextApiHandler } from 'next'
+import { destroyCookie } from 'nookies'
+
+const handler: NextApiHandler = async (req, res) => {
+  if (req.method !== 'POST') return res.status(404).send('Not Found')
+
+  destroyCookie({ res }, 'session', {
+    path: '/'
+  })
+
+  res.send(JSON.stringify({ status: 'success' }))
+}
+
+export default handler

example/src/pages/auth0/authed.tsx

@@ -1,7 +1,6 @@
 import styles from '../../styles/Home.module.css'
 import Head from 'next/head'
 import { VFC } from 'react'
-
 import { useUser } from '@auth0/nextjs-auth0'
 import { Text } from '@geist-ui/react'
 

example/src/pages/auth0/index.tsx

@@ -33,7 +33,7 @@ const IndexPage: VFC = () => {
           </a>
         )}
 
-        <Link href="/auth0/authed" prefetch={false}>
+        <Link href="/auth0/authed" passHref>
           <div className={styles.card}>
             <h2>Go My Page &rarr;</h2>
             {!user && <p>(Not Allowed)</p>}

example/src/pages/cognito/index.tsx

@@ -41,7 +41,7 @@ const IndexPage: VFC = () => {
           </button>
         )}
 
-        <Link href="/cognito/authed" prefetch={false}>
+        <Link href="/cognito/authed" prefetch>
           <div className={styles.card}>
             <h2>Go My Page &rarr;</h2>
             {!login && <p>(Not Allowed)</p>}

example/src/pages/firebase/index.tsx

@@ -1,6 +1,7 @@
 import { login, logout, auth } from '../../lib/firebase'
 import styles from '../../styles/Home.module.css'
 import Head from 'next/head'
+import Link from 'next/link'
 import { VFC } from 'react'
 import { Text } from '@geist-ui/react'
 
@@ -31,12 +32,14 @@ const IndexPage: VFC = () => {
           </button>
         )}
 
-        <a href="/firebase/authed" className={styles.card}>
-          <h2>Go My Page &rarr;</h2>
-          {(!auth.currentUser || auth.currentUser.isAnonymous) && (
-            <p>(Not Allowed)</p>
-          )}
-        </a>
+        <Link href="/firebase/authed" passHref>
+          <a className={styles.card}>
+            <h2>Go My Page &rarr;</h2>
+            {(!auth.currentUser || auth.currentUser.isAnonymous) && (
+              <p>(Not Allowed)</p>
+            )}
+          </a>
+        </Link>
       </div>
     </>
   )

example/src/pages/ip/_middleware.ts

@@ -1,13 +1,16 @@
 import { makeIPInspector } from 'next-fortress'
-import { NextRequest, NextResponse } from 'next/server'
+import { NextMiddleware, NextResponse } from 'next/server'
 
-export const middleware = (req: NextRequest) => {
+export const middleware: NextMiddleware = (req, event) => {
   if (!req.nextUrl.pathname.includes('admin')) return
   const ips = req.cookies['__allowed_ips']
-  if (!ips) return NextResponse.redirect('/ip')
+  if (!ips) {
+    if (req.preflight) return new NextResponse(null)
+    return NextResponse.redirect('/ip')
+  }
 
   return makeIPInspector(ips.split(','), {
     type: 'redirect',
     destination: '/ip'
-  })(req)
+  })(req, event)
 }

example/src/pages/ip/index.tsx

@@ -3,22 +3,18 @@ import { useEffect, VFC } from 'react'
 import Cookies from 'js-cookie'
 import { Button, Text, Spacer, Input, useInput, Link } from '@geist-ui/react'
 import NextLink from 'next/link'
-import { useRouter } from 'next/router'
 
 const IndexPage: VFC = () => {
-  const router = useRouter()
   const { state: ips, setState: setIps, reset, bindings } = useInput('')
   useEffect(() => {
     const cookie = Cookies.get('__allowed_ips')
     cookie && setIps(cookie)
   }, [])
   const setIPToCookie = () => {
     Cookies.set('__allowed_ips', ips, { path: '/' })
-    router.reload()
   }
   const resetIPToCookie = () => {
     Cookies.remove('__allowed_ips')
-    router.reload()
     reset()
   }