Links

<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.

Example Code

1
<LoginForm
2
formProps={{
3
formName: 'Login Form',
4
onSubmit,
5
onSkip
6
}}
7
loginPath='/'
8
onLogin={fetchBackendResources}
9
onLogout={() => (window.location.href = window.location.origin)}
10
>
11
<Router>
12
<Switch key={window.location.href}>
13
<Route exact path='/'>
14
<RootPage />
15
</Route>
16
<Route exact path='/your/path'>
17
<YourComponent />
18
</Route>
19
</Switch>
20
</Router>
21
</LoginForm>

<LoginForm />

Prop
Type
Description
formProps
Configuration props passed to the Feathery login flow, which is rendered as a <Form />.
authClient
optional instance of auth SDK
If you don't specify this, Feathery will dynamically install the JS SDK itself that you can use with getAuthClient(). If you want to initialize this yourself and pass it to Feathery, you can do so with this prop.
loader
optional JSX component
A custom loader to show while waiting for auth network calls and, if applicable, your onLogin call. If not provided, a default spinner will be used.
loginPath
optional string
OAuth 2.1 requires login paths to be whitelisted, so this prop allows you to specify a path you've whitelisted in your auth provider that the user should be directed to when showing the login flow. Defaults to /
onClientReady
optional function
A callback function that runs after the auth SDK has been initialized. The function passes the SDK client as the single parameter.
onLogin
optional async function
A callback function that runs after the user has been successfully authenticated. This function will run to completion before the provider children are rendered, so you can load anything your application needs here.
onLogout
optional function
A callback function that runs after the user has logged out.
children
optional JSX components
Pass the authenticated portion of your app as children of the LoginProvider component. You can also pass no children if you just want to render the login flow with no protected resource.