Feathery Docs
HomeCommunityGitHub
  • Platform
    • Quickstart
    • Form Fields
      • Hidden Fields
      • How to Set Field Values
      • Link Fields Across Forms
      • Custom Field Input Format
    • Build Forms
      • Elements
        • Basic
          • Container
          • Button
          • Text
          • Progress Bar
          • Image
          • PDF Viewer
          • Video
          • Table
          • Tooltip
        • Fields
          • Address
            • Street Address Line 1
            • Street Address Line 2
            • City
            • State
            • Country
            • Zip Code
          • Button Group
          • Checkbox
          • Checkbox Group
          • Color Picker
          • Combobox
          • Dropdown
          • Dropdown Multiselect
          • Date Selector
          • Time Selector
          • Email
          • File Upload
          • Matrix
          • Number
          • Password
          • Picture Choice
          • Pin Input
          • Phone Number
          • Radio Group
          • Rating
          • Signature
            • Legally Binding Signatures
          • Slider
          • Social Security Number
          • Text Area
          • Text Field
          • Payment Method
          • URL
        • Custom HTML, JS, CSS, and Iframes
        • Custom Fields
      • Design
        • Reuse styles and elements
          • Styling
          • Assets
        • Alignment and Spacing
        • Sizing Forms and Elements
        • Responsive Layouts
      • Actions
      • Logic
        • Navigate Steps Conditionally
        • Show Elements Conditionally
        • Custom Field Validation
        • Available Conditions
        • Display Dynamic Text
        • Dynamically Repeating Containers
      • Advanced Logic & API Connections
        • Visual Rule Builder
          • Connect to API Action
            • Salesforce API Connector
          • Set Field Value Action
          • Navigate Step Action
          • Set Field Error Action
          • Open URL Action
          • Set Calendly URL Action
        • Javascript Rule Builder
          • API Connections in Code
          • Trigger Integrations from Logic
          • Reusable Logic Configs
        • Examples
          • API Connectors
            • Dynamic dropdown options
            • Dynamic form navigation
            • Pre-fill form from Salesforce
            • Pre-fill form from Hubspot
            • Pre-fill field options from Google Sheets
            • Generate ChatGPT Message
          • Field Validation
            • Complex Field Validation
            • Date and Time Validations
          • Initialize Date Field
          • Dynamically set field placeholder
          • Randomize Field Option Order
          • Update field options based on previous selection
      • Integrations
        • Event Triggers
        • Examples
          • Upload Files to Google Drive
      • Dev & Staging Environments
    • Launch Forms
      • Embed Your Forms
      • Custom URLs & SEO
      • User Tracking
      • Completion Criteria
      • UTM Parameters
      • Accessibility Standards
      • Analytics
      • A/B Testing
      • Offline Mode
    • Document Intelligence
      • Review Extractions
      • Post Processing
      • Supported Document Types
      • Prompting Guide
      • Examples
        • Investment Report
    • Document Autofill & Signatures
      • Autofill Document Templates
        • PDF Autofill
        • Word Doc Autofill
          • Dynamic Tables
        • Excel Autofill
        • PowerPoint Autofill
        • InDesign Autofill
      • Signature Workflows
        • Signature Notifications
        • Access Signed Documents
        • 21 CFR Part 11 Compliance
      • Export Form Submission PDF
    • Workflows
      • Collaboration
        • Email Invite
        • Start Directly
        • Anonymous Starts
      • Review, Edit & Approve
      • Unique Submission Links
    • Enterprise Compliance
      • Security and Privacy
      • Reliability and Performance
      • Document Management
      • Data Sovereignty
    • International Forms
      • Translate Forms
      • Right to Left (RTL) Support
      • International Form Fields
    • White Label Feathery
      • Build Custom Form Fields
      • Offer Custom Form Templates
      • Custom Dashboard Domain
    • Account Settings
      • Managing Your Team
      • Permissions and User Groups
      • Account Attributes
    • FAQs
      • Account & Billing
  • Guides
    • Verify Submissions & Prevent Spam
    • Build a Login or Verification Flow
      • Connect an Auth Integration
      • Add Auth Methods
        • Email SMS Code
        • Email Magic Link
        • Phone Number Verification
        • Social Logins
          • Google
          • Amazon
          • Apple
          • Bitbucket
          • Coinbase
          • Discord
          • Facebook
          • GitHub
          • GitLab
          • LinkedIn
          • Microsoft
          • Slack
          • Twitch
          • Twitter
      • (Optional) Require Auth for Onboarding Steps
      • (Optional) Add Login Flow to Your Site
        • Feathery-Hosted (Recommended)
        • Embed Login Flow
          • Login Embed Tutorial
    • Build a Payment Flow
      • Connect to Stripe
      • Select Products or Plans
      • Collect Payment Method
      • Purchase Products
    • Send Custom SMS Messages
    • Salesforce Picklist Options
  • Developers
    • React SDK
      • API Guide
        • init()
        • <Form>
          • contextRef
          • Event Handlers
            • onSubmit()
            • onLoad()
            • onChange()
            • onAction()
            • onError()
            • onFormComplete()
            • onView()
          • Custom JSX Components
          • PopupOptions
          • initialLoader
        • getFieldValues()
        • setFieldValues()
        • updateUserId()
        • Login API
          • <LoginForm>
          • useAuthClient()
      • Inline vs Popup Form
    • Javascript SDK
    • Context API
      • Field Object
      • field.setStyles()
      • Deprecated Context API
    • REST API
Powered by GitBook
On this page
  • Overview
  • Example Code
  • <LoginForm />

Was this helpful?

  1. Developers
  2. React SDK
  3. API Guide
  4. Login API

<LoginForm>

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

PreviousLogin APINextuseAuthClient()

Last updated 1 year ago

Was this helpful?

Overview

Use <LoginForm /> instead of 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 (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

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

Prop
Type
Description

formProps

authId

optional string

The user's authentication token. Setting this denotes the user as logged in and will track their authenticated account information.

authClient

optional instance of auth SDK

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.

Configuration props passed to the Feathery login flow, which is rendered as a .

If you don't specify this, Feathery will dynamically install the JS SDK itself that you can use with . If you want to initialize this yourself and pass it to Feathery, you can do so with this prop.

<Form />
first-time onboarding flow
How to Build a Login Flow in Feathery
Tutorial: How to Embed Your Login Flow
getAuthClient()
<Form />