+ {error}
+
+
+ {document.cookie}
+
+
+ )
+}
+
+export default LoginButton
diff --git a/src/lib/cookie.ts b/src/lib/cookie.ts
index 47aed71..a5cd1db 100644
--- a/src/lib/cookie.ts
+++ b/src/lib/cookie.ts
@@ -4,7 +4,7 @@ export const saveCookie = (name: string, value: string, mins: number = 60) => {
const date = new Date()
date.setTime(date.getTime() + mins * 60 * 1000)
- document.cookie = `${name}=${value};Expires=${date.toUTCString()}; path=/; Secure; SameSite=None`
+ document.cookie = `${name}=${value};Expires=${date.toUTCString()}; path=/; Secure; SameSite=Strict`
}
export const getCookie = (name: string) => {
@@ -14,5 +14,15 @@ export const getCookie = (name: string) => {
}
export const deleteCookie = (name: string) => {
- document.cookie = `${name}=; Max-Age=0; path=/; Secure; SameSite=None`
+ document.cookie = `${name}=; Max-Age=0; path=/; Secure; SameSite=Strict`
+}
+
+export const clearAllCookies = () => {
+ const cookies = document.cookie.split(";")
+ for (let i = 0; i < cookies.length; i++) {
+ const cookie = cookies[i]
+ const eqPos = cookie.indexOf("=")
+ const name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie
+ document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`
+ }
}
diff --git a/src/lib/stateCookie.ts b/src/lib/stateCookie.ts
index e6cd8c0..5144527 100644
--- a/src/lib/stateCookie.ts
+++ b/src/lib/stateCookie.ts
@@ -1,5 +1,5 @@
-import { saveCookie, getCookie } from './cookie'
+import { saveCookie, getCookie, deleteCookie } from './cookie'
export const createStateCookie = (value: string) => {
if (!value) throw new Error('state value is required')
@@ -13,3 +13,7 @@ export const createStateCookie = (value: string) => {
export const getStateCookie = (state: string) => {
return getCookie(`app.txs.${state}`)
}
+
+export const deleteStateCookie = (state: string) => {
+ deleteCookie(`app.txs.${state}`)
+}
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
new file mode 100644
index 0000000..b1e6364
--- /dev/null
+++ b/src/utils/auth.ts
@@ -0,0 +1,76 @@
+import {
+ deleteStateCookie,
+ getStateCookie,
+ createStateCookie
+} from "@/lib/stateCookie"
+import {
+ createPKCECodeChallenge,
+ createRandomString
+} from "@/lib/pkce"
+import { PKCEState } from "@/types"
+import config from "@/config"
+
+export const getPKCEState = (state?: string, code?: string): PKCEState => {
+ // guard: pkce is not initialized yet
+ if (!state || !code) {
+ return { isReady: false }
+ }
+
+ const codeVerifier = getStateCookie(state)
+ if (!codeVerifier) return { isReady: false }
+
+ return {
+ isReady: true,
+ codeVerifier,
+ code
+ }
+}
+
+export const redirectAuthRequestE = async (
+ state: string, codeChallenge: string
+) => {
+ const query = new URLSearchParams()
+ query.append('response_type', 'code,id_token')
+ query.append('redirect_uri', config.BASE_URL)
+ query.append('state', state)
+ query.append('code_challenge', codeChallenge)
+
+ window.location.replace(`${config.LOGIN_URL}?${query.toString()}`)
+}
+
+export const postForTokens = async (code: string, codeVerifier: string) => {
+ const body = JSON.stringify({
+ code,
+ code_verifier: codeVerifier,
+ grant_type: 'authorization_code'
+ })
+ const request = new Request(config.TOKEN_URL, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body
+ })
+
+ try {
+ const response = await fetch(request)
+ const res = await response.json()
+
+ if (!response.ok) {
+ throw new Error(res.error)
+ }
+ // FIXME for more error handling of different response
+ return res
+
+ } catch (error) {
+ if (error instanceof Error)
+ throw new Error(error?.message)
+ else throw new Error('An unknown error occurred')
+ }
+}
+
+export const getPKCECodes = async () => {
+ const codeVerifier = createRandomString()
+ const codeChallenge = await createPKCECodeChallenge(codeVerifier)
+ const state = createStateCookie(codeVerifier)
+
+ return { codeVerifier, codeChallenge, state }
+}
From d31ef79b22ec217f45d07d00f1b7ab23c9450efe Mon Sep 17 00:00:00 2001
From: Alvin Ng <243186+alvinsj@users.noreply.github.com>
Date: Sun, 9 Jun 2024 01:01:47 +0800
Subject: [PATCH 03/15] get code verifier on query param
---
src/App.test.tsx | 2 +-
src/App.tsx | 49 ++++++++++++++++++++++++------------------------
2 files changed, 25 insertions(+), 26 deletions(-)
diff --git a/src/App.test.tsx b/src/App.test.tsx
index ad60949..39c3d01 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -12,5 +12,5 @@ test('renders text', () => {
expect(wrapper).toBeTruthy()
const { getByText } = wrapper
- expect(getByText('Vite + React')).toBeTruthy()
+ expect(getByText('Login')).toBeTruthy()
})
diff --git a/src/App.tsx b/src/App.tsx
index afe48ac..c60289e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,33 +1,32 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { useEffect, useState } from 'react'
+
+import { getPKCEState } from '@/utils/auth'
+import LoginButton from '@/components/LoginButton'
+import { clearAllCookies } from './lib/cookie'
function App() {
- const [count, setCount] = useState(0)
+ const [isAuthReady, setIsAuthReady] = useState(false)
+ const [status, setStatus] = useState('')
+ useEffect(() => {
+ const params = new URLSearchParams(window.location.search)
+ const state = params.get('state')
+ const code = params.get('code')
+
+ const { isReady: isAuthReady, codeVerifier } =
+ getPKCEState(state ?? undefined, code ?? undefined)
+
+ setIsAuthReady(isAuthReady)
+ if (!isAuthReady) return () => clearAllCookies()
+ else setStatus(`code: ${code}, codeVerifier: ${codeVerifier}`)
+
+ return () => clearAllCookies()
+ }, [])
return (
<>
-
-
- Edit src/App.tsx and save to test HMR
-
- Click on the Vite and React logos to learn more -
+ {isAuthReady &&Ready for Auth Request
} + {status &&{status}
} +