@cirrobio/react-auth 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cirrobio/react-auth",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Provides authentication configuration and components for React applications using Cirro.",
   "author": "CirroBio",
   "repository": {
@@ -14,7 +14,8 @@
   "module": "dist/index.esm.js",
   "types": "dist/types/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "build": "npx rollup --config",
@@ -24,9 +25,9 @@
     "test": "jest --coverage --silent --passWithNoTests"
   },
   "dependencies": {
-    "@cirrobio/api-client": "^0.9.0",
-    "@cirrobio/react-core": "^0.0.1",
-    "@cirrobio/sdk": "^0.9.0",
+    "@cirrobio/api-client": "^0.12.0",
+    "@cirrobio/react-core": "^0.0.2",
+    "@cirrobio/sdk": "^0.12.0",
     "@mui/icons-material": "^5.17.1",
     "@mui/lab": "^5.0.0-alpha.176",
     "@mui/material": "^5.15.10",

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

@@ -0,0 +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');
+  }
+}

package/src/amplify/auth-listener.ts

@@ -0,0 +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;
+    }
+  }
+};

package/src/amplify/configure-amplify.ts

@@ -0,0 +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',
+      },
+    },
+  });
+}

package/src/amplify/magic-link.ts

@@ -0,0 +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,
+    },
+  });
+}

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +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);

package/src/auth-context/useAuthenticator.tsx

@@ -0,0 +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,
+  }
+}

package/src/components/LoginModal.tsx

@@ -0,0 +1,109 @@
+import { Alert, Dialog, IconButton, Stack, Typography } from '@mui/material';
+import React, { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
+import { LoginOptions } from './LoginOptions';
+import { LoginProvider } from '@cirrobio/api-client';
+import { handlePromiseError } from "@cirrobio/sdk";
+import { useAppConfig } from "@cirrobio/react-core";
+import { CloseOutlined } from '@mui/icons-material';
+import { COGNITO_PROVIDER_ID, LOGIN_SENT_SUCCESS_MSG } from "../amplify/magic-link";
+
+interface IProps {
+  onClose: () => void;
+  open: boolean;
+}
+
+function getLoginMessage(loginProviders: LoginProvider[]): string {
+  const loginMessage = 'Sign in using one of the options below.';
+  const cognitoEnabled = loginProviders.some(p => p.id === COGNITO_PROVIDER_ID);
+  const onlyCognito = loginProviders.length === 1 && cognitoEnabled;
+  // Only email sign in is enabled.
+  if (onlyCognito) {
+    return `Sign in with your email below.`;
+  }
+  // Both SSO and email sign in is enabled
+  if (!onlyCognito && cognitoEnabled) {
+    return `${loginMessage} If your sign in method isn't listed, please enter your email.`;
+  }
+  // Only SSO sign in is enabled
+  return loginMessage;
+}
+
+export function LoginModal({ onClose, open }: Readonly<IProps>): ReactElement {
+  const { authProvider } = useAppConfig();
+  const loginProviders = authProvider.getLoginProviders();
+  const loginDescription = useMemo(() => getLoginMessage(loginProviders), [loginProviders]);
+
+  const [error, setError] = useState('');
+  const [message, setMessage] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const handleLogin = useCallback(async (providerId: string, email?: string): Promise<void> => {
+    setError('');
+    setMessage('');
+    setBusy(true);
+    if (providerId === COGNITO_PROVIDER_ID) {
+      try {
+        await authProvider.loginEmail({ username: email });
+        setBusy(false);
+        setMessage(LOGIN_SENT_SUCCESS_MSG);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'An error occurred');
+        setBusy(false);
+      }
+    } else {
+      authProvider.loginSSO(providerId).catch(handlePromiseError);
+      if (onClose) onClose();
+    }
+  }, [onClose]);
+
+  useEffect(() => {
+    // Log in automatically if there is only one provider (and it's not Cognito)
+    const firstProviderId = loginProviders.at(0)?.id;
+    if (loginProviders.length === 1 && firstProviderId !== COGNITO_PROVIDER_ID) {
+      void handleLogin(firstProviderId);
+    }
+  }, [loginProviders, handleLogin]);
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      PaperProps={{ sx: { p: 3, background: "#FFF", width: '480px' } }}
+      
+      aria-label="login dialog"
+    >
+      <Stack alignItems="left" justifyContent="space-between" gap={1} direction={{ xs: 'row' }}>
+        <Stack direction="column">
+          <Typography id="dialog-title" variant="h4" color="secondary">
+            Login
+          </Typography>
+          <Typography variant="body2">
+            {loginDescription}
+          </Typography>
+        </Stack>
+        {!!onClose &&
+          <Stack alignItems="right" direction="row" gap={0}>
+            <IconButton
+              aria-label="Close"
+              onClick={() => onClose()}
+              size="small"
+              color="secondary"
+              sx={{ transform: 'translate(10px, 0px)' }}>
+              <CloseOutlined sx={{ fontSize: '22px' }} />
+            </IconButton>
+          </Stack>
+        }
+      </Stack>
+      <Stack sx={{  pt: 0 }}>
+        <LoginOptions loginProviders={loginProviders} onSelect={handleLogin} busy={busy} success={!!message} />
+        {error && (
+          <Alert severity="error" sx={{ mt: 4 }}>{error}</Alert>
+        )}
+        {message && (
+          <Alert severity="success" sx={{ mt: 4 }}>{message}</Alert>
+        )}
+      </Stack>
+    </Dialog>
+  );
+}
+

package/src/components/LoginOptions.tsx

@@ -0,0 +1,67 @@
+import React, { Children, ReactElement, useMemo, useState } from 'react';
+import { Button, Divider, Stack, TextField } from '@mui/material';
+import { LoginProvider } from '@cirrobio/api-client';
+import { LoadingButton } from '@mui/lab';
+import { COGNITO_PROVIDER_ID } from "../amplify/magic-link";
+
+interface IProps {
+  loginProviders: LoginProvider[];
+  onSelect: (providerId: string, email?: string) => void;
+  busy: boolean;
+  success: boolean;
+}
+
+
+export function LoginOptions({ loginProviders, onSelect, busy, success }: Readonly<IProps>): ReactElement {
+  const [email, setEmail] = useState('');
+
+  const ssoProviders = useMemo(() =>
+    loginProviders.filter(p => p.id !== COGNITO_PROVIDER_ID), [loginProviders]);
+  const cognitoEnabled = useMemo(() =>
+    loginProviders.some(p => p.id === COGNITO_PROVIDER_ID), [loginProviders]);
+
+  return (
+    <Stack alignItems="center" gap={3} direction="column" sx={{ pt: 2 }}>
+      {Children.toArray(ssoProviders.map(provider => {
+        return (<Button
+          sx={{ p: 2, width: '100%' }}
+          variant="contained"
+          color="secondary"
+          fullWidth={true}
+          startIcon={<img style={{ maxHeight: '17px' }} alt={provider.name} src={provider.logoUrl} />}
+          onClick={() => onSelect(provider.id)}
+        >{provider.name}</Button>)
+      }))}
+      {cognitoEnabled && (
+        <form style={{ width: '100%' }}>
+          <Stack alignItems="center" gap={3} direction="column">
+            {ssoProviders.length > 0 && (<Divider textAlign="center" color="secondary" flexItem>OR</Divider>)}
+            <TextField
+              label="Email"
+              size="medium"
+              value={email}
+              variant="outlined"
+              autoComplete="off"
+              type="email"
+              fullWidth={true}
+              required
+              onChange={(e) => setEmail(e.target.value)}
+            />
+            <LoadingButton
+              type="submit"
+              sx={{ p: 2, width: '100%' }}
+              loading={busy}
+              disabled={!email?.trim() || success}
+              variant="contained"
+              color="secondary"
+              fullWidth={true}
+              onClick={() => onSelect(COGNITO_PROVIDER_ID, email)}
+            >
+              Sign in with email
+            </LoadingButton>
+          </Stack>
+        </form>
+      )}
+    </Stack>
+  )
+}

package/src/components/LoginWrapper.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useAuthenticator } from "../auth-context/useAuthenticator";
+import { LoginModal } from "./LoginModal";
+
+interface IProps {
+  children?: React.ReactNode;
+}
+
+/**
+ * LoginWrapper component is used to conditionally render children based on the authentication status
+ * or display a login modal if the user is unauthenticated.
+ */
+export function LoginWrapper({ children }: IProps) {
+  const { authStatus } = useAuthenticator();
+
+  if (!authStatus || authStatus === 'configuring') {
+    return null;
+  }
+
+  if (authStatus === 'unauthenticated') {
+    return <LoginModal onClose={null} open={true} />
+  }
+
+  return children;
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+export { AmplifyAuthProvider } from './amplify/amplify-auth-provider';
+export type { AuthStatus } from './models/auth-status';
+
+// Components
+export { LoginModal } from './components/LoginModal';
+export { LoginOptions } from './components/LoginOptions';
+export { LoginWrapper } from './components/LoginWrapper';
+
+export { AuthenticationContextProvider } from './auth-context/authentication-context-provider';
+export { useAuthenticator } from './auth-context/useAuthenticator';
+
+export { StaticInteractiveAuthTokenProvider } from './static/static-token-provider';

package/src/models/auth-status.ts

@@ -0,0 +1 @@
+export type AuthStatus = 'configuring' | 'authenticated' | 'unauthenticated';

package/src/static/static-token-provider.ts

@@ -0,0 +1,44 @@
+import { StaticTokenAuthProvider } from "@cirrobio/sdk";
+import { InteractiveAuthenticationProvider } from "@cirrobio/react-core";
+
+
+/**
+ * StaticInteractiveAuthTokenProvider is a simple implementation of the InteractiveAuthenticationProvider
+ * that uses a static token for authentication. This is useful for testing or when you have a known token.
+ */
+export class StaticInteractiveAuthTokenProvider
+  extends StaticTokenAuthProvider
+  implements InteractiveAuthenticationProvider {
+
+  constructor(token: string) {
+    super(token);
+  }
+
+  async getAccessToken(): Promise<string> {
+    return this.token;
+  }
+
+  loginSSO(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  loginEmail(_): Promise<void> {
+    return Promise.resolve();
+  }
+
+  finishLoginEmail(_): Promise<void> {
+    return Promise.resolve();
+  }
+
+  signOut(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  getLoginProviders() {
+    return [];
+  }
+
+  registerAuthEventHandler(_): void {
+    // No-op for static token provider
+  }
+}