separate Session#fedCM method

Author: elf-pavlik

src/core/AuthorizationCodeGrant.ts

@@ -9,6 +9,43 @@ const buildRedirectUrl = (code, state, providerUrl) => {
   return `${base}?code=${code}&state=${state}&iss=${encodeURIComponent(providerUrl)}`;
 };
 
+const fedCMLogin = async (clientId: string): Promise<string> => {
+
+  // RFC 7636 PKCE, remember code verifer
+  const { pkce_code_verifier, pkce_code_challenge } = await getPKCEcode();
+  sessionStorage.setItem("pkce_code_verifier", pkce_code_verifier);
+
+  // RFC 6749 OAuth 2.0 - CSRF token
+  const csrf_token = window.crypto.randomUUID();
+  sessionStorage.setItem("csrf_token", csrf_token);
+
+  const credential = await navigator.credentials.get({
+    // @ts-ignore
+    identity: {
+      providers: [{
+        configURL: 'any',
+        clientId: clientId,
+        registered: true,
+        params: {
+          code_challenge: pkce_code_challenge,
+          code_challenge_method: 'S256',
+          state: csrf_token
+        }
+      }]
+    }
+  });
+
+  console.log('FedCM returned', credential)
+
+  // XXX: we ♥️ trailing slash errors
+  // @ts-ignore
+  const fedCMissuer = new URL(credential.configURL).origin + '/'
+
+  // XXX: figure out how to deal with state!!!
+  // @ts-ignore
+  return buildRedirectUrl(credential.token, csrf_token, fedCMissuer)
+}
+
 /**
  * Login with the idp, using a provided `client_id` or dynamic client registration if none provided.
  *
@@ -95,30 +132,7 @@ const redirectForLogin = async (idp: string, redirect_uri: string, client_detail
     `&state=${csrf_token}` +
     `&prompt=consent`; // this query parameter value MUST be present for CSS v7 to issue a refresh token ( // TODO open issue because prompting is the default behaviour but without this query param no refresh token is provided despite the "remember this client" box being checked)
 
-  // do FedCM dance 💃🏻
-  // do check first!
-  const params = Object.fromEntries(new URL(redirect_to_idp).searchParams);
-  const credential = await navigator.credentials.get({
-    // @ts-ignore
-    identity: {
-      providers: [{
-        configURL: 'any',
-        clientId: params.client_id,
-        registered: true,
-        params: {
-          code_challenge: params.code_challenge,
-          code_challenge_method: params.code_challenge_method,
-          state: params.state
-        }
-      }]
-    }
-  });
-  console.log(credential)
-  // XXX: we ♥️ trailing slash errors
-  // @ts-ignore
-  const fedCMissuer = new URL(credential.configURL).origin + '/'
-  // @ts-ignore
-  return buildRedirectUrl(credential.token, params.state, fedCMissuer)
+  window.location.href = redirect_to_idp;
 };
 
 /**
@@ -331,4 +345,4 @@ const requestAccessToken = async (
     });
 };
 
-export { redirectForLogin, onIncomingRedirect };
+export { redirectForLogin, fedCMLogin, onIncomingRedirect };

src/core/Session.ts

@@ -1,5 +1,5 @@
 import { SignJWT, decodeJwt, exportJWK } from "jose";
-import { redirectForLogin, onIncomingRedirect } from "./AuthorizationCodeGrant";
+import { redirectForLogin, fedCMLogin, onIncomingRedirect } from "./AuthorizationCodeGrant";
 import { renewTokens } from "./RefreshTokenGrant";
 import { SessionDatabase } from "./SessionDatabase";
 import { DynamicRegistrationClientDetails, DereferencableIdClientDetails, SessionInformation, TokenDetails } from "./SessionInformation";
@@ -113,7 +113,12 @@ export class SessionCore extends EventTarget implements Session {
   }
 
   async login(idp: string, redirect_uri: string) {
-    const fedCMFakeUrl = await redirectForLogin(idp, redirect_uri, this.information.clientDetails)
+    await redirectForLogin(idp, redirect_uri, this.information.clientDetails)
+  }
+
+  async fedCM() {
+    if (!this.information.clientDetails.client_id) throw new Error('FedCM requires Client ID URL')
+    const fedCMFakeUrl = await fedCMLogin(this.information.clientDetails.client_id)
     await this.handleRedirectFromLogin(fedCMFakeUrl)
   }