Sasaki's React Login

Standardized Firebase login pattern for Sasaki products

Install

yarn add @strategies/login

Publish

pnpm esbuild
pnpm publish --no-git-checks

Example

<Login
    // Firebase config
    config={config}

    // Image src path
    logo={DashiLogo}

    // Content for the user guide panel
    guide={<>
        <header>User Guide</header>
        <iframe title="User Guide" src="https://docs.google.com/document/d/e/2PACX-1vSxkp7VeI26uJyDZ7Pz_eV7ZKghZaQDDcbizP0YT0VthZmJ5iSwV3P8DzyA1KxA3DPO22xKVLeOK9bV/pub?embedded=true"></iframe>
    </>}

    // A list of screen grabs to display
    screens={[
        { src: TimelineScreen, alt: '', },
        { src: DataScreen, alt: '', },
        { src: ProjectDataScreen, alt: '', },
    ]}
/>

Required Props

config: FirebaseConfig

Your app's Firebase config.

Optional Props

contactEmail: string = '[email protected]'

Appears during certain phases of the login process when help might need to be requested directly.

contactLink: string

The destination of the "Contact" icon link. If nothing is supplied, the icon will not appear.

emailEnabled: boolean = true

If this is set to false, then the only option available is logging in with a Sasaki account.

guide: ReactElement

What is rendered when a user clicks the "User Guide" icon. If nothing is supplied, then the icon will not appear.

logo: string

Populates the src attribute of the image element that sits above the forms.

onChange: (user: User|null) => any

An event that is emitted whenever the auth state changes.

screens: { src: string, alt: string }[]

The images that fade in when the login component mounts.

title: string|ReactElement

Text for beneath the logo image.

whitelist: string[]

If supplied, will prevent users from creating accounts if the supplied email does not match any in the whitelist. If nothing is supplied, then all emails are valid for new account creation.