> For the complete documentation index, see [llms.txt](https://docs.feathery.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.feathery.io/develop/react/api-guide/login-api/login-form.md).

# \<LoginForm>

## Overview

Use `<LoginForm />` instead of [\<Form />](/develop/react/api-guide/form.md) 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](broken://pages/sv8DAAQsHViLKqJnB3UL) (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](/guides/login-flow.md)

[Tutorial: How to Embed Your Login Flow](broken://pages/SBrWcUmodizodgFTZqg5)

### Example Code

{% code lineNumbers="true" %}

```jsx
<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>
```

{% endcode %}

### \<LoginForm /> <a href="#loginform" id="loginform"></a>

<table><thead><tr><th width="181.33333333333331">Prop</th><th width="205">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>formProps</code></td><td></td><td>Configuration props passed to the Feathery login flow, which is rendered as a <a href="/pages/IeSzDVGJlWjveEkhIm6y">&#x3C;Form /></a>.</td></tr><tr><td><code>authId</code></td><td><code>optional string</code></td><td>The user's authentication token. Setting this denotes the user as <code>logged in</code> and will track their authenticated account information.</td></tr><tr><td><code>authClient</code></td><td><code>optional instance of auth SDK</code></td><td>If you don't specify this, Feathery will dynamically install the JS SDK itself that you can use with <a href="/pages/OVsZJMZk0iaDSyiOjEK9">getAuthClient()</a>. If you want to initialize this yourself and pass it to Feathery, you can do so with this prop.</td></tr><tr><td><code>loader</code></td><td><code>optional JSX component</code></td><td>A custom loader to show while waiting for auth network calls and, if applicable, your <code>onLogin</code> call. If not provided, a default spinner will be used.</td></tr><tr><td><code>loginPath</code></td><td><code>optional string</code></td><td>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 <code>/</code></td></tr><tr><td><code>onClientReady</code></td><td><code>optional function</code></td><td>A callback function that runs after the auth SDK has been initialized. The function passes the SDK client as the single parameter.</td></tr><tr><td><code>onLogin</code></td><td><code>optional async function</code></td><td>A callback function that runs after the user has been successfully authenticated. This function will run to completion before the provider <code>children</code> are rendered, so you can load anything your application needs here.</td></tr><tr><td><code>onLogout</code></td><td><code>optional function</code></td><td>A callback function that runs after the user has logged out. </td></tr><tr><td><code>children</code></td><td><code>optional JSX components</code></td><td>Pass the authenticated portion of your app as <code>children</code> of the <code>LoginProvider</code> component. You can also pass no <code>children</code> if you just want to render the login flow with no protected resource.</td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.feathery.io/develop/react/api-guide/login-api/login-form.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.