@cirrobio/react-auth 0.0.2 → 0.0.4

package/src/components/LoginModal.tsx

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

@@ -1,67 +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>
-  )
-}
+import React, { ReactElement, useMemo, useState } from 'react';
+import { Button, Divider, Stack, TextField } from '@mui/material';
+import { LoginProvider } from '@cirrobio/api-client';
+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 }}>
+      {ssoProviders.map(provider => (
+        <Button
+          key={provider.id}
+          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)}
+            />
+            <Button
+              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
+            </Button>
+          </Stack>
+        </form>
+      )}
+    </Stack>
+  )
+}

package/src/components/LoginWrapper.tsx

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

@@ -1,12 +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';
+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

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

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

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