@mehdad67/apitogo 0.1.24

package/src/lib/authentication/providers/openid.tsx

@@ -0,0 +1,516 @@
+import * as oauth from "oauth4webapi";
+import { ErrorBoundary } from "react-error-boundary";
+import type { NavigateFunction } from "react-router";
+import type { OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import type {
+  AuthActionContext,
+  AuthActionOptions,
+  AuthenticationPlugin,
+  AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CallbackHandler } from "../components/CallbackHandler.js";
+import { OAuthErrorPage } from "../components/OAuthErrorPage.js";
+import { AuthorizationError } from "../errors.js";
+import { type UserProfile, useAuthState } from "../state.js";
+
+const CODE_VERIFIER_KEY = "code-verifier";
+const STATE_KEY = "oauth-state";
+
+export interface OpenIdProviderData {
+  // just for easy migration we also allow for undefined type. can be removed in the future.
+  type: "openid" | undefined;
+  accessToken: string;
+  idToken?: string;
+  refreshToken?: string;
+  expiresOn: Date;
+  tokenType: string;
+  claims: oauth.IDToken | undefined;
+}
+
+declare module "../state.js" {
+  interface ProviderDataRegistry {
+    openid: OpenIdProviderData;
+  }
+}
+
+export const OPENID_CALLBACK_PATH = "/oauth/callback";
+
+export class OpenIDAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
+  protected client: oauth.Client;
+  protected issuer: string;
+  protected authorizationServer: oauth.AuthorizationServer | undefined;
+
+  protected callbackUrlPath: string;
+
+  protected onAuthorizationUrl?: (
+    authorizationUrl: URL,
+    options: { isSignIn: boolean; isSignUp: boolean },
+  ) => void;
+
+  protected readonly redirectToAfterSignUp: string | undefined;
+  protected readonly redirectToAfterSignIn: string | undefined;
+  protected readonly redirectToAfterSignOut: string;
+  private readonly audience?: string;
+  private readonly scopes: string[];
+
+  constructor({
+    issuer,
+    audience,
+    clientId,
+    redirectToAfterSignUp,
+    redirectToAfterSignIn,
+    redirectToAfterSignOut = "/",
+    basePath,
+    scopes,
+  }: OpenIDAuthenticationConfig) {
+    super();
+    this.client = {
+      client_id: clientId,
+      token_endpoint_auth_method: "none",
+    };
+    this.audience = audience;
+    this.issuer = issuer;
+    // This is the callback URL for the OAuth provider. So it needs the base path.
+    this.callbackUrlPath = joinUrl(basePath, OPENID_CALLBACK_PATH);
+    this.scopes = scopes ?? ["openid", "profile", "email"];
+
+    this.redirectToAfterSignUp = redirectToAfterSignUp;
+    this.redirectToAfterSignIn = redirectToAfterSignIn;
+    this.redirectToAfterSignOut = redirectToAfterSignOut;
+  }
+
+  protected async getAuthServer() {
+    if (!this.authorizationServer) {
+      const issuerUrl = new URL(this.issuer);
+      const response = await oauth.discoveryRequest(issuerUrl);
+      this.authorizationServer = await oauth.processDiscoveryResponse(
+        issuerUrl,
+        response,
+      );
+    }
+    return this.authorizationServer;
+  }
+
+  /**
+   * Sets the tokens from various OAuth responses
+   * @param response
+   */
+  protected setTokensFromResponse(response: oauth.TokenEndpointResponse) {
+    if (!response.expires_in) {
+      throw new AuthorizationError("No expires_in in response");
+    }
+
+    const claims = response.id_token
+      ? oauth.getValidatedIdTokenClaims(response)
+      : undefined;
+
+    const tokens: OpenIdProviderData = {
+      type: "openid",
+      accessToken: response.access_token,
+      refreshToken: response.refresh_token,
+      idToken: response.id_token,
+      expiresOn: new Date(Date.now() + response.expires_in * 1000),
+      tokenType: response.token_type,
+      claims,
+    };
+
+    const emailVerified =
+      claims?.email_verified === undefined
+        ? undefined
+        : Boolean(claims?.email_verified);
+
+    useAuthState.setState((state) => {
+      const profile = state.profile
+        ? {
+            ...state.profile,
+            emailVerified:
+              emailVerified ?? state.profile.emailVerified ?? false,
+          }
+        : null;
+
+      return {
+        profile,
+        providerData: tokens,
+      };
+    });
+  }
+
+  async signUp(
+    _: { navigate: NavigateFunction },
+    {
+      redirectTo,
+      replace = false,
+    }: {
+      redirectTo?: string;
+      replace?: boolean;
+    } = {},
+  ) {
+    return this.authorize({
+      redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
+      replace,
+      isSignUp: true,
+    });
+  }
+
+  async signIn(
+    _: AuthActionContext,
+    { redirectTo, replace = false }: AuthActionOptions,
+  ) {
+    return this.authorize({
+      redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
+      replace,
+    });
+  }
+
+  public async refreshUserProfile(): Promise<boolean> {
+    const accessToken = await this.getAccessToken();
+    const authServer = await this.getAuthServer();
+
+    const userInfoResponse = await oauth.userInfoRequest(
+      authServer,
+      this.client,
+      accessToken,
+    );
+    const userInfo = await userInfoResponse.json();
+
+    const { providerData } = useAuthState.getState();
+    const emailVerified =
+      providerData?.type === "openid"
+        ? providerData.claims?.email_verified
+        : undefined;
+
+    const profile: UserProfile = {
+      sub: userInfo.sub,
+      email: userInfo.email,
+      name: userInfo.name,
+      emailVerified: userInfo.email_verified ?? emailVerified ?? false,
+      pictureUrl: userInfo.picture,
+    };
+
+    useAuthState.setState({
+      isAuthenticated: true,
+      isPending: false,
+      profile,
+    });
+
+    return true;
+  }
+
+  private async authorize({
+    redirectTo,
+    isSignUp = false,
+    replace = false,
+  }: {
+    redirectTo: string;
+    isSignUp?: boolean;
+    replace?: boolean;
+  }): Promise<void> {
+    const code_challenge_method = "S256";
+    const authorizationServer = await this.getAuthServer();
+
+    if (!authorizationServer.authorization_endpoint) {
+      throw new AuthorizationError("No authorization endpoint");
+    }
+
+    /**
+     * The following MUST be generated for every redirect to the authorization_endpoint. You must store
+     * the codeVerifier and nonce in the end-user session such that it can be recovered as the user
+     * gets redirected from the authorization server back to your application.
+     */
+    const codeVerifier = oauth.generateRandomCodeVerifier();
+    const codeChallenge = await oauth.calculatePKCECodeChallenge(codeVerifier);
+
+    sessionStorage.setItem(CODE_VERIFIER_KEY, codeVerifier);
+
+    // redirect user to as.authorization_endpoint
+    const authorizationUrl = new URL(
+      authorizationServer.authorization_endpoint,
+    );
+
+    sessionStorage.setItem("redirect-to", redirectTo);
+
+    const redirectUrl = new URL(window.location.origin);
+    redirectUrl.pathname = this.callbackUrlPath;
+    redirectUrl.search = "";
+    redirectUrl.hash = "";
+
+    authorizationUrl.searchParams.set("client_id", this.client.client_id);
+    authorizationUrl.searchParams.set("redirect_uri", redirectUrl.toString());
+    authorizationUrl.searchParams.set("response_type", "code");
+    authorizationUrl.searchParams.set("scope", this.scopes.join(" "));
+    authorizationUrl.searchParams.set("code_challenge", codeChallenge);
+    authorizationUrl.searchParams.set(
+      "code_challenge_method",
+      code_challenge_method,
+    );
+    if (this.audience) {
+      authorizationUrl.searchParams.set("audience", this.audience);
+    }
+
+    this.onAuthorizationUrl?.(authorizationUrl, {
+      isSignIn: !isSignUp,
+      isSignUp,
+    });
+
+    /**
+     * The state parameter is used to prevent CSRF attacks and should be used in all authorization requests.
+     * It is independent of PKCE and should be used regardless of PKCE support.
+     */
+    const state = oauth.generateRandomState();
+    sessionStorage.setItem(STATE_KEY, state);
+    authorizationUrl.searchParams.set("state", state);
+
+    if (replace) {
+      location.replace(authorizationUrl.href);
+    } else {
+      location.href = authorizationUrl.href;
+    }
+  }
+
+  async getAccessToken(): Promise<string> {
+    const as = await this.getAuthServer();
+    const { providerData, setLoggedOut } = useAuthState.getState();
+
+    if (
+      !providerData ||
+      (providerData?.type !== "openid" && providerData?.type !== undefined)
+    ) {
+      useAuthState.getState().setLoggedOut();
+      throw new AuthorizationError("Invalid or incompatible provider data");
+    }
+
+    const tokenState = providerData;
+
+    if (new Date(tokenState.expiresOn) < new Date()) {
+      if (!tokenState.refreshToken) {
+        useAuthState.getState().setLoggedOut();
+        throw new AuthorizationError("No refresh token found");
+      }
+
+      const response = await oauth.refreshTokenGrantRequest(
+        as,
+        this.client,
+        oauth.None(),
+        tokenState.refreshToken,
+      );
+      const result = await oauth.processRefreshTokenResponse(
+        as,
+        this.client,
+        response,
+      );
+
+      if (!result.access_token) {
+        setLoggedOut();
+        throw new AuthorizationError("No access token in response");
+      }
+
+      this.setTokensFromResponse(result);
+
+      return result.access_token.toString();
+    } else {
+      return tokenState.accessToken;
+    }
+  }
+
+  signRequest = async (request: Request): Promise<Request> => {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  };
+
+  signOut = async (_: AuthActionContext) => {
+    const { providerData } = useAuthState.getState();
+    const idToken =
+      providerData?.type === "openid" || providerData?.type === undefined
+        ? providerData?.idToken
+        : undefined;
+
+    useAuthState.getState().setLoggedOut();
+
+    const as = await this.getAuthServer();
+
+    const redirectUrl = new URL(window.location.origin);
+    redirectUrl.pathname = joinUrl(
+      import.meta.env.BASE_URL,
+      this.redirectToAfterSignOut,
+    );
+
+    let logoutUrl: URL;
+    // The endSessionEndpoint is set, the IdP supports some form of logout,
+    // so we use the IdP logout. Otherwise, just redirect the user to home
+    if (as.end_session_endpoint) {
+      logoutUrl = new URL(as.end_session_endpoint);
+      if (idToken) {
+        logoutUrl.searchParams.set("id_token_hint", idToken);
+      }
+      logoutUrl.searchParams.set(
+        "post_logout_redirect_uri",
+        redirectUrl.toString(),
+      );
+    } else {
+      logoutUrl = redirectUrl;
+    }
+
+    window.location.href = logoutUrl.toString();
+  };
+
+  onPageLoad = async () => {
+    const { providerData } = useAuthState.getState();
+
+    if (providerData?.type !== "openid") {
+      return;
+    }
+    const tokenState = providerData;
+
+    if (new Date(tokenState.expiresOn) < new Date()) {
+      if (!tokenState.refreshToken) {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
+        return;
+      }
+
+      try {
+        const as = await this.getAuthServer();
+        const response = await oauth.refreshTokenGrantRequest(
+          as,
+          this.client,
+          oauth.None(),
+          tokenState.refreshToken,
+        );
+        const result = await oauth.processRefreshTokenResponse(
+          as,
+          this.client,
+          response,
+        );
+
+        if (!result.access_token) {
+          throw new AuthorizationError("No access token in response");
+        }
+
+        this.setTokensFromResponse(result);
+      } catch {
+        useAuthState.getState().setLoggedOut();
+        return;
+      }
+    }
+
+    useAuthState.setState({ isPending: false });
+  };
+
+  handleCallback = async () => {
+    const url = new URL(window.location.href);
+    const state = url.searchParams.get("state");
+    const storedState = sessionStorage.getItem(STATE_KEY);
+    sessionStorage.removeItem(STATE_KEY);
+
+    if (state !== storedState) {
+      throw new AuthorizationError("Invalid state parameter");
+    }
+
+    // one eternity later, the user lands back on the redirect_uri
+    // Authorization Code Grant Request & Response
+    const codeVerifier = sessionStorage.getItem(CODE_VERIFIER_KEY);
+    sessionStorage.removeItem(CODE_VERIFIER_KEY);
+    if (!codeVerifier) {
+      throw new AuthorizationError("No code verifier found in state.");
+    }
+
+    const authServer = await this.getAuthServer();
+
+    const params = oauth.validateAuthResponse(
+      authServer,
+      this.client,
+      url.searchParams,
+      state ?? undefined,
+    );
+
+    const redirectUrl = new URL(url);
+    redirectUrl.pathname = this.callbackUrlPath;
+    redirectUrl.search = "";
+    redirectUrl.hash = "";
+
+    const response = await oauth.authorizationCodeGrantRequest(
+      authServer,
+      this.client,
+      oauth.None(),
+      params,
+      redirectUrl.toString(),
+      codeVerifier,
+    );
+
+    const oauthResult = await oauth.processAuthorizationCodeResponse(
+      authServer,
+      this.client,
+      response,
+    );
+
+    this.setTokensFromResponse(oauthResult);
+
+    const accessToken = await this.getAccessToken();
+
+    const { providerData } = useAuthState.getState();
+    const claims =
+      providerData?.type === "openid" ? providerData.claims : undefined;
+
+    const userInfoResponse = await oauth.userInfoRequest(
+      authServer,
+      this.client,
+      accessToken,
+    );
+    const userInfo = await userInfoResponse.json();
+
+    const profile: UserProfile = {
+      ...userInfo,
+      sub: userInfo.sub,
+      email: userInfo.email,
+      name: userInfo.name,
+      emailVerified: userInfo.email_verified ?? claims?.email_verified ?? false,
+      pictureUrl: userInfo.picture,
+    };
+
+    useAuthState.setState({
+      isAuthenticated: true,
+      isPending: false,
+      profile,
+    });
+    await this.refreshUserProfile();
+
+    const redirectTo = sessionStorage.getItem("redirect-to") ?? "/";
+    sessionStorage.removeItem("redirect-to");
+    return redirectTo;
+  };
+
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: OPENID_CALLBACK_PATH,
+        element: (
+          <ClientOnly>
+            <ErrorBoundary
+              fallbackRender={({ error }) => <OAuthErrorPage error={error} />}
+            >
+              <CallbackHandler handleCallback={this.handleCallback} />
+            </ErrorBoundary>
+          </ClientOnly>
+        ),
+      },
+    ];
+  }
+}
+
+const openIDAuth: AuthenticationProviderInitializer<
+  OpenIDAuthenticationConfig
+> = (options) => new OpenIDAuthenticationProvider(options);
+
+export default openIDAuth;