Move test openid

.github/workflows/ci.yml

@@ -53,31 +53,3 @@ jobs:
           tags: ghcr.io/cerberauth/openid-connect-examples/${{ matrix.example }}:latest
           cache-from: type=registry,ref=ghcr.io/cerberauth/openid-connect-examples/${{ matrix.example }}:latest
           cache-to: type=inline
-
-  hydra-app-docker:
-    runs-on: ubuntu-latest
-
-    permissions:
-      packages: write
-
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Login to GitHub Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Build and push
-        uses: docker/build-push-action@v5
-        with:
-          context: ./hydra-login-consent
-          push: ${{ github.ref == 'refs/heads/main' }}
-          tags: ghcr.io/cerberauth/openid-connect-examples/hydra-login-consent:latest
-          cache-from: type=registry,ref=ghcr.io/cerberauth/openid-connect-examples/hydra-login-consent:latest
-          cache-to: type=inline

README.md

@@ -2,33 +2,6 @@
 
 This repository contains a collection of OpenID Connect examples and demos.
 
-## Installation
-
-* Install Hydra
-* Launch Docker Compose
-
-### OAuth 2.0 Clients
-
-```shell
-hydra create client \
-    --endpoint http://localhost:4445 \
-    --grant-type authorization_code,refresh_token \
-    --response-type code,id_token \
-    --scope openid,offline,offline_access,profile,email \
-    --token-endpoint-auth-method client_secret_post \
-    --redirect-uri http://127.0.0.1:4446/callback
-
-code_client_id="{set to client id from output}"
-code_client_secret="{set to client secret from output}"
-hydra perform authorization-code \
-    --endpoint http://localhost:4444 \
-    --client-id $code_client_id \
-    --client-secret $code_client_secret
-
-code_access_token="{set to access token from output}"
-hydra introspect token $code_access_token
-```
-
 ## Examples
 
 - [React SPA (Single Page App) using Authorization Code Flow with PKCE](./react-spa-authorization-code-flow)

examples/react-spa-authorization-code-flow/.env

@@ -1,2 +1,2 @@
-AUTH0_DOMAIN=
-AUTH0_CLIENT_ID=
+VITE_OIDC_ISSUER=""
+VITE_OIDC_CLIENT_ID=""

examples/react-spa-authorization-code-flow/src/lib/auth/useAuth.ts

@@ -12,7 +12,7 @@ type LoginParams = {
 }
 
 export const useAuth = () => {
-  const { setAccessToken, setIdToken, setUser, client, user, as } = useContext(AuthContext)
+  const { setAccessToken, idToken, setIdToken, setUser, client, user, as } = useContext(AuthContext)
   const [isHandlingRedirect, setHandlingRedirect] = useState(false)
 
   const login = async (params?: LoginParams) => {
@@ -39,6 +39,7 @@ export const useAuth = () => {
      */
     const code_verifier = oauth.generateRandomCodeVerifier()
     const code_challenge = await oauth.calculatePKCECodeChallenge(code_verifier)
+    let state: string | undefined
     let nonce: string | undefined
 
     const authorizationUrl = new URL(as.authorization_endpoint!)
@@ -49,17 +50,14 @@ export const useAuth = () => {
     authorizationUrl.searchParams.set('code_challenge', code_challenge)
     authorizationUrl.searchParams.set('code_challenge_method', code_challenge_method)
 
-    /**
-     * We cannot be sure the AS supports PKCE so we're going to use nonce too. Use of PKCE is
-     * backwards compatible even if the AS doesn't support it which is why we're using it regardless.
-     */
-    if (as.code_challenge_methods_supported?.includes('S256') !== true) {
-      nonce = oauth.generateRandomNonce()
-      authorizationUrl.searchParams.set('nonce', nonce)
-    }
+    state = oauth.generateRandomState()
+    authorizationUrl.searchParams.set('state', state)
+
+    nonce = oauth.generateRandomNonce()
+    authorizationUrl.searchParams.set('nonce', nonce)
 
     console.log('store code_verifier and nonce in the end-user session')
-    sessionStorage.setItem(webStorageKey, JSON.stringify({ code_verifier, nonce, redirectUri }))
+    sessionStorage.setItem(webStorageKey, JSON.stringify({ code_verifier, state, nonce, redirectUri }))
 
     console.log('Redirect to Authorization Server', authorizationUrl.toString())
     window.location.assign(authorizationUrl.toString())
@@ -78,14 +76,14 @@ export const useAuth = () => {
       return
     }
     sessionStorage.removeItem(webStorageKey)
-    const { code_verifier, nonce, redirectUri } = JSON.parse(storage)
+    const { code_verifier, state, nonce, redirectUri } = JSON.parse(storage)
 
     let sub: string
     let accessToken: string
 
     // @ts-expect-error
     const currentUrl: URL = new URL(window.location)
-    const params = oauth.validateAuthResponse(as, client, currentUrl)
+    const params = oauth.validateAuthResponse(as, client, currentUrl, state)
     if (oauth.isOAuth2Error(params)) {
       console.error('Error Response', params)
       setHandlingRedirect(false)
@@ -143,9 +141,20 @@ export const useAuth = () => {
   }
 
   const logout = () => {
+    if (!as || !idToken) {
+      return
+    }
+
+    const endSessionUrl = new URL(as.end_session_endpoint!)
+    endSessionUrl.searchParams.set('post_logout_redirect_uri', window.location.origin)
+    endSessionUrl.searchParams.set('id_token_hint', idToken)
+    console.log('Redirect to End Session Endpoint', endSessionUrl.toString())
+
     setAccessToken(undefined)
     setIdToken(undefined)
     setUser(undefined)
+
+    window.location.assign(endSessionUrl.toString())
   }
 
   useEffect(() => {