@cirrobio/react-auth 0.0.2 → 0.0.4

package/src/amplify/amplify-auth-provider.tsx

@@ -1,70 +1,70 @@
-import { LoginProvider } from "@cirrobio/api-client";
-import { configureAmplify } from "./configure-amplify";
-import { fetchAuthSession } from "@aws-amplify/auth";
-import {
-  AppConfig,
-  InteractiveAuthenticationProvider,
-  IRedeemSignInLink,
-  ISignInLinkRequest,
-  AuthEventHandlerOptions
-} from "@cirrobio/react-core";
-import { signInWithRedirect } from "aws-amplify/auth";
-import { redeemSignInLink, requestSignInLink } from "./magic-link";
-import { Hub } from "aws-amplify/utils";
-import { amplifyAuthEventHandler } from "./auth-listener";
-import { CurrentUser } from "@cirrobio/sdk";
-import { signOut as amplifySignOut } from 'aws-amplify/auth';
-
-export class AmplifyAuthProvider implements InteractiveAuthenticationProvider {
-  private loginProviders: LoginProvider[];
-
-  constructor(
-    readonly clientId?: string
-  ) {
-  }
-
-  public getLoginProviders() {
-    return this.loginProviders;
-  }
-
-  public configure(config: AppConfig): void {
-    configureAmplify(config, this.clientId);
-    this.loginProviders = config.tenantInfo.loginProviders;
-    console.log('AmplifyAuthProvider loaded with config');
-  }
-
-  public async getAccessToken(): Promise<string> {
-    const session = await fetchAuthSession();
-    return session.tokens.accessToken.toString();
-  }
-
-  public async getCurrentUser(): Promise<CurrentUser> {
-    const session = await fetchAuthSession();
-    const idToken = session.tokens.idToken.payload;
-    return CurrentUser.fromCognitoUser(idToken);
-  }
-
-  public async forceRefresh(): Promise<void> {
-    await fetchAuthSession({ forceRefresh: true });
-  }
-
-  public async loginSSO(loginProvider: string): Promise<void> {
-    await signInWithRedirect({ provider: { custom: loginProvider } })
-  }
-
-  public async loginEmail(request: ISignInLinkRequest): Promise<void> {
-    await requestSignInLink(request);
-  }
-
-  public async finishLoginEmail(request: IRedeemSignInLink): Promise<void> {
-    await redeemSignInLink(request);
-  }
-
-  public async signOut(): Promise<void> {
-    await amplifySignOut();
-  }
-
-  public registerAuthEventHandler(options: AuthEventHandlerOptions): () => void {
-    return Hub.listen('auth', (data) => amplifyAuthEventHandler(data, options), 'authentication-provider');
-  }
-}
+import { LoginProvider } from "@cirrobio/api-client";
+import { configureAmplify } from "./configure-amplify";
+import { fetchAuthSession } from "@aws-amplify/auth";
+import {
+  AppConfig,
+  InteractiveAuthenticationProvider,
+  IRedeemSignInLink,
+  ISignInLinkRequest,
+  AuthEventHandlerOptions
+} from "@cirrobio/react-core";
+import { signInWithRedirect } from "aws-amplify/auth";
+import { redeemSignInLink, requestSignInLink } from "./magic-link";
+import { Hub } from "aws-amplify/utils";
+import { amplifyAuthEventHandler } from "./auth-listener";
+import { CurrentUser } from "@cirrobio/sdk";
+import { signOut as amplifySignOut } from 'aws-amplify/auth';
+
+export class AmplifyAuthProvider implements InteractiveAuthenticationProvider {
+  private loginProviders: LoginProvider[];
+
+  constructor(
+    readonly clientId?: string
+  ) {
+  }
+
+  public getLoginProviders() {
+    return this.loginProviders;
+  }
+
+  public configure(config: AppConfig): void {
+    configureAmplify(config, this.clientId);
+    this.loginProviders = config.tenantInfo.loginProviders;
+    console.log('AmplifyAuthProvider loaded with config');
+  }
+
+  public async getAccessToken(): Promise<string> {
+    const session = await fetchAuthSession();
+    return session.tokens.accessToken.toString();
+  }
+
+  public async getCurrentUser(): Promise<CurrentUser> {
+    const session = await fetchAuthSession();
+    const idToken = session.tokens.idToken.payload;
+    return CurrentUser.fromCognitoUser(idToken);
+  }
+
+  public async forceRefresh(): Promise<void> {
+    await fetchAuthSession({ forceRefresh: true });
+  }
+
+  public async loginSSO(loginProvider: string): Promise<void> {
+    await signInWithRedirect({ provider: { custom: loginProvider } })
+  }
+
+  public async loginEmail(request: ISignInLinkRequest): Promise<void> {
+    await requestSignInLink(request);
+  }
+
+  public async finishLoginEmail(request: IRedeemSignInLink): Promise<void> {
+    await redeemSignInLink(request);
+  }
+
+  public async signOut(): Promise<void> {
+    await amplifySignOut();
+  }
+
+  public registerAuthEventHandler(options: AuthEventHandlerOptions): () => void {
+    return Hub.listen('auth', (data) => amplifyAuthEventHandler(data, options), 'authentication-provider');
+  }
+}

package/src/amplify/auth-listener.ts

@@ -1,23 +1,23 @@
-import { AuthHubEventData } from "@aws-amplify/core/src/Hub/types/AuthTypes";
-import { AuthEventHandlerOptions } from "@cirrobio/react-core";
-
-export const amplifyAuthEventHandler = ({ payload }, options: AuthEventHandlerOptions): void => {
-  const { event }: AuthHubEventData = payload;
-  const { onSignIn, onSignOut } = options ?? {};
-  switch (event) {
-    case 'signedIn': {
-      console.log('user has signed in successfully');
-      onSignIn();
-      break;
-    }
-    case 'signedOut':
-    case 'tokenRefresh_failure': {
-      onSignOut();
-      break;
-    }
-    default: {
-      console.info(event);
-      break;
-    }
-  }
-};
+import { AuthHubEventData } from "@aws-amplify/core/src/Hub/types/AuthTypes";
+import { AuthEventHandlerOptions } from "@cirrobio/react-core";
+
+export const amplifyAuthEventHandler = ({ payload }, options: AuthEventHandlerOptions): void => {
+  const { event }: AuthHubEventData = payload;
+  const { onSignIn, onSignOut } = options ?? {};
+  switch (event) {
+    case 'signedIn': {
+      console.log('user has signed in successfully');
+      onSignIn();
+      break;
+    }
+    case 'signedOut':
+    case 'tokenRefresh_failure': {
+      onSignOut();
+      break;
+    }
+    default: {
+      console.info(event);
+      break;
+    }
+  }
+};

package/src/amplify/configure-amplify.ts

@@ -1,35 +1,35 @@
-import { Amplify } from "aws-amplify";
-import { AppConfig } from "@cirrobio/react-core";
-
-export function configureAmplify(config: AppConfig, clientIdOverride?: string): void {
-  Amplify.configure({
-    Auth: {
-      Cognito: {
-        userPoolId: config.auth.userPoolId,
-        userPoolClientId: clientIdOverride ?? config.auth.uiAppId,
-        loginWith: {
-          oauth: {
-            domain: config.auth.endpoint,
-            scopes: [
-              'phone',
-              'email',
-              'profile',
-              'openid',
-              'aws.cognito.signin.user.admin'
-            ],
-            redirectSignIn: [window.location.origin],
-            redirectSignOut: [window.location.origin],
-            responseType: 'code',
-          },
-        },
-      },
-    },
-    API: {
-      GraphQL: {
-        endpoint: config.liveEndpoint,
-        region: config.region,
-        defaultAuthMode: 'userPool',
-      },
-    },
-  });
-}
+import { Amplify } from "aws-amplify";
+import { AppConfig } from "@cirrobio/react-core";
+
+export function configureAmplify(config: AppConfig, clientIdOverride?: string): void {
+  Amplify.configure({
+    Auth: {
+      Cognito: {
+        userPoolId: config.auth.userPoolId,
+        userPoolClientId: clientIdOverride ?? config.auth.uiAppId,
+        loginWith: {
+          oauth: {
+            domain: config.auth.endpoint,
+            scopes: [
+              'phone',
+              'email',
+              'profile',
+              'openid',
+              'aws.cognito.signin.user.admin'
+            ],
+            redirectSignIn: [window.location.origin],
+            redirectSignOut: [window.location.origin],
+            responseType: 'code',
+          },
+        },
+      },
+    },
+    API: {
+      GraphQL: {
+        endpoint: config.liveEndpoint,
+        region: config.region,
+        defaultAuthMode: 'userPool',
+      },
+    },
+  });
+}

package/src/amplify/magic-link.ts

@@ -1,62 +1,62 @@
-import { confirmSignIn, signIn } from 'aws-amplify/auth';
-import { IRedeemSignInLink, ISignInLinkRequest } from "@cirrobio/react-core";
-
-export const COGNITO_PROVIDER_ID = 'COGNITO';
-export const LOGIN_SENT_SUCCESS_MSG = 'Check your email for the login link. If you don’t have an account, the link won’t be sent.';
-
-export async function requestSignInLink({ username, redirectUri }: ISignInLinkRequest): Promise<void> {
-  const redirectUriToUse = redirectUri || window.location.origin + "/magic-link";
-  try {
-    const { nextStep } = await signIn({
-      username,
-      password: null,
-      options: {
-        authFlowType: "CUSTOM_WITHOUT_SRP",
-      },
-    });
-    if (nextStep.signInStep !== 'CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE') {
-      return;
-    }
-
-    const clientMetadata = {
-      signInMethod: "MAGIC_LINK",
-      redirectUri: redirectUriToUse,
-      hasMagicLink: "no",
-    }
-    await confirmSignIn({
-      challengeResponse: "cirro-is-awesome",
-      options: {
-        clientMetadata,
-      },
-    });
-  } catch (e) {
-    // Cleanup the error message
-    const errorMessage = e.toString();
-    if (errorMessage.includes('UserLambdaValidationException')) {
-      throw Error(errorMessage.split('failed with error')[1]);
-    } else if (errorMessage.includes('Incorrect username or password')) {
-      throw Error('Incorrect username or password.');
-    }
-    throw Error(errorMessage);
-  }
-}
-
-export async function redeemSignInLink({ username, challenge }: IRedeemSignInLink): Promise<void> {
-  await signIn({
-    username: username,
-    password: null,
-    options: {
-      authFlowType: "CUSTOM_WITHOUT_SRP",
-    },
-  });
-  const clientMetadata = {
-    signInMethod: "MAGIC_LINK",
-    hasMagicLink: "yes",
-  }
-  await confirmSignIn({
-    challengeResponse: challenge,
-    options: {
-      clientMetadata,
-    },
-  });
-}
+import { confirmSignIn, signIn } from 'aws-amplify/auth';
+import { IRedeemSignInLink, ISignInLinkRequest } from "@cirrobio/react-core";
+
+export const COGNITO_PROVIDER_ID = 'COGNITO';
+export const LOGIN_SENT_SUCCESS_MSG = 'Check your email for the login link. If you don’t have an account, the link won’t be sent.';
+
+export async function requestSignInLink({ username, redirectUri }: ISignInLinkRequest): Promise<void> {
+  const redirectUriToUse = redirectUri || window.location.origin + "/magic-link";
+  try {
+    const { nextStep } = await signIn({
+      username,
+      password: null,
+      options: {
+        authFlowType: "CUSTOM_WITHOUT_SRP",
+      },
+    });
+    if (nextStep.signInStep !== 'CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE') {
+      return;
+    }
+
+    const clientMetadata = {
+      signInMethod: "MAGIC_LINK",
+      redirectUri: redirectUriToUse,
+      hasMagicLink: "no",
+    }
+    await confirmSignIn({
+      challengeResponse: "cirro-is-awesome",
+      options: {
+        clientMetadata,
+      },
+    });
+  } catch (e) {
+    // Cleanup the error message
+    const errorMessage = e.toString();
+    if (errorMessage.includes('UserLambdaValidationException')) {
+      throw Error(errorMessage.split('failed with error')[1]);
+    } else if (errorMessage.includes('Incorrect username or password')) {
+      throw Error('Incorrect username or password.');
+    }
+    throw Error(errorMessage);
+  }
+}
+
+export async function redeemSignInLink({ username, challenge }: IRedeemSignInLink): Promise<void> {
+  await signIn({
+    username: username,
+    password: null,
+    options: {
+      authFlowType: "CUSTOM_WITHOUT_SRP",
+    },
+  });
+  const clientMetadata = {
+    signInMethod: "MAGIC_LINK",
+    hasMagicLink: "yes",
+  }
+  await confirmSignIn({
+    challengeResponse: challenge,
+    options: {
+      clientMetadata,
+    },
+  });
+}

package/src/auth-context/authentication-context-provider.tsx

@@ -1,65 +1,65 @@
-import * as React from "react";
-import { ReactElement, useCallback, useEffect, useMemo, useState } from "react";
-import { AuthenticatorContext, AuthenticatorContextType } from './authentication-context';
-import { AuthStatus } from "../models/auth-status";
-import { UserDetail } from "@cirrobio/api-client";
-import { useAppConfig } from "@cirrobio/react-core";
-import { CurrentUser } from "@cirrobio/sdk";
-
-export type AuthenticationProviderProps = {
-  children: React.ReactNode;
-  fetchUserInfo?: boolean;
-}
-
-/**
- * Manages the authentication state of the application.
- * @param children - The child components to render within the provider.
- * @param fetchUserInfo - If true, fetches detailed user information after authentication.
- */
-export function AuthenticationContextProvider({ children, fetchUserInfo }: AuthenticationProviderProps): ReactElement {
-  const [authStatus, setAuthStatus] = useState<AuthStatus>('configuring');
-  const [authInfo, setAuthInfo] = useState<CurrentUser>(null);
-  const [userInfo, setUserInfo] = useState<UserDetail>(null);
-  const { dataService, authProvider } = useAppConfig();
-
-  const refresh = useCallback((): void => {
-    authProvider.getCurrentUser()
-      .then((currentUser) => {
-        setAuthStatus('authenticated');
-        setAuthInfo(currentUser);
-        if (fetchUserInfo) {
-          dataService.users.getUser({ username: currentUser.username })
-            .then((data) => setUserInfo(data))
-            .catch((error) => {
-              console.error('Failed to fetch user info:', error);
-              setUserInfo(null);
-            });
-        }
-      })
-      .catch(() => {
-        setAuthStatus('unauthenticated');
-      });
-  }, []);
-
-  const value: AuthenticatorContextType = useMemo(
-    () => ({ authStatus, authInfo, refresh, userInfo }),
-    [authStatus, authInfo, userInfo, refresh]
-  );
-
-  // Refresh auth state on page load
-  useEffect(() => {
-    refresh();
-  }, [refresh]);
-
-  // Refresh auth state in response to auth events
-  useEffect(() => {
-    const options = { onSignIn: refresh, onSignOut: refresh };
-    return authProvider.registerAuthEventHandler(options);
-  }, [refresh]);
-
-  return (
-    <AuthenticatorContext.Provider value={value}>
-      {children}
-    </AuthenticatorContext.Provider>
-  );
-}
+import * as React from "react";
+import { ReactElement, useCallback, useEffect, useMemo, useState } from "react";
+import { AuthenticatorContext, AuthenticatorContextType } from './authentication-context';
+import { AuthStatus } from "../models/auth-status";
+import { UserDetail } from "@cirrobio/api-client";
+import { useAppConfig } from "@cirrobio/react-core";
+import { CurrentUser } from "@cirrobio/sdk";
+
+export type AuthenticationProviderProps = {
+  children: React.ReactNode;
+  fetchUserInfo?: boolean;
+}
+
+/**
+ * Manages the authentication state of the application.
+ * @param children - The child components to render within the provider.
+ * @param fetchUserInfo - If true, fetches detailed user information after authentication.
+ */
+export function AuthenticationContextProvider({ children, fetchUserInfo }: AuthenticationProviderProps): ReactElement {
+  const [authStatus, setAuthStatus] = useState<AuthStatus>('configuring');
+  const [authInfo, setAuthInfo] = useState<CurrentUser>(null);
+  const [userInfo, setUserInfo] = useState<UserDetail>(null);
+  const { dataService, authProvider } = useAppConfig();
+
+  const refresh = useCallback((): void => {
+    authProvider.getCurrentUser()
+      .then((currentUser) => {
+        setAuthStatus('authenticated');
+        setAuthInfo(currentUser);
+        if (fetchUserInfo) {
+          dataService.users.getUser({ username: currentUser.username })
+            .then((data) => setUserInfo(data))
+            .catch((error) => {
+              console.error('Failed to fetch user info:', error);
+              setUserInfo(null);
+            });
+        }
+      })
+      .catch(() => {
+        setAuthStatus('unauthenticated');
+      });
+  }, []);
+
+  const value: AuthenticatorContextType = useMemo(
+    () => ({ authStatus, authInfo, refresh, userInfo }),
+    [authStatus, authInfo, userInfo, refresh]
+  );
+
+  // Refresh auth state on page load
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  // Refresh auth state in response to auth events
+  useEffect(() => {
+    const options = { onSignIn: refresh, onSignOut: refresh };
+    return authProvider.registerAuthEventHandler(options);
+  }, [refresh]);
+
+  return (
+    <AuthenticatorContext.Provider value={value}>
+      {children}
+    </AuthenticatorContext.Provider>
+  );
+}

package/src/auth-context/authentication-context.tsx

@@ -1,15 +1,15 @@
-import { createContext } from 'react';
-import { AuthStatus } from "../models/auth-status";
-import { UserDetail } from "@cirrobio/api-client";
-import { CurrentUser } from "@cirrobio/sdk";
-
-
-
-export type AuthenticatorContextType = {
-  authStatus: AuthStatus;
-  authInfo: CurrentUser | null;
-  userInfo: UserDetail;
-  refresh: () => void;
-}
-
-export const AuthenticatorContext = createContext<AuthenticatorContextType>(null);
+import { createContext } from 'react';
+import { AuthStatus } from "../models/auth-status";
+import { UserDetail } from "@cirrobio/api-client";
+import { CurrentUser } from "@cirrobio/sdk";
+
+
+
+export type AuthenticatorContextType = {
+  authStatus: AuthStatus;
+  authInfo: CurrentUser | null;
+  userInfo: UserDetail;
+  refresh: () => void;
+}
+
+export const AuthenticatorContext = createContext<AuthenticatorContextType>(null);

package/src/auth-context/useAuthenticator.tsx

@@ -1,31 +1,31 @@
-import { useCallback, useContext } from 'react';
-import { AuthenticatorContext, AuthenticatorContextType } from './authentication-context';
-import { useAppConfig } from "@cirrobio/react-core";
-
-type UseAuthenticator = AuthenticatorContextType & {
-  isLoggedIn: boolean;
-  signOut: () => void;
-};
-
-/**
- * Custom hook to access authentication context
- */
-export function useAuthenticator(): UseAuthenticator {
-  const context = useContext(AuthenticatorContext);
-  const { authProvider } = useAppConfig();
-
-  const signOut = useCallback(() => {
-    sessionStorage.clear();
-    authProvider.signOut().then(() => {
-      // Location reload clears any in-memory state
-      // Amplify does a hard reload automatically, but only if you are signing in from oauth / SSO
-      location.reload();
-    });
-  }, [authProvider]);
-
-  return {
-    ...context,
-    isLoggedIn: context?.authStatus === 'authenticated',
-    signOut,
-  }
-}
+import { useCallback, useContext } from 'react';
+import { AuthenticatorContext, AuthenticatorContextType } from './authentication-context';
+import { useAppConfig } from "@cirrobio/react-core";
+
+type UseAuthenticator = AuthenticatorContextType & {
+  isLoggedIn: boolean;
+  signOut: () => void;
+};
+
+/**
+ * Custom hook to access authentication context
+ */
+export function useAuthenticator(): UseAuthenticator {
+  const context = useContext(AuthenticatorContext);
+  const { authProvider } = useAppConfig();
+
+  const signOut = useCallback(() => {
+    sessionStorage.clear();
+    authProvider.signOut().then(() => {
+      // Location reload clears any in-memory state
+      // Amplify does a hard reload automatically, but only if you are signing in from oauth / SSO
+      location.reload();
+    });
+  }, [authProvider]);
+
+  return {
+    ...context,
+    isLoggedIn: context?.authStatus === 'authenticated',
+    signOut,
+  }
+}