<LoginForm>

Similar to the <Form> component but optimized to easily introduce login, signup, and onboarding functionality into your custom app.

Overview

Use <LoginForm /> instead of <Form /> to display your login & signup flow. It provides critical authentication-related logic, including:

  • For logged out users, show the login or signup step of your flow. Prevent users from accessing your authenticated app until they log in.

  • Once a user logs in, display either the first-time onboarding flow (if included in your login form) or the authenticated part of your custom app.

  • (Optional) Automatically log the user out of the application after their session expires after a period of inactivity.

How to Build a Login Flow in Feathery

Tutorial: How to Embed Your Login Flow

Example Code

<LoginForm
  formProps={{
    formId: 'aBcDeF',
    onSubmit,
    onSkip
  }}
  loginPath='/'
  onLogin={fetchBackendResources}
  onLogout={() => (window.location.href = window.location.origin)}
  >
    <Router>
      <Switch key={window.location.href}>
        <Route exact path='/'>
          <RootPage />
        </Route>
        <Route exact path='/your/path'>
          <YourComponent />
        </Route>
      </Switch>
    </Router>
</LoginForm>

<LoginForm />

Last updated