Login Embed Tutorial

Step-by-step guide to adding a login, signup, and onboarding flow to your website.

Overview

Feathery is the easiest way to add login and signup functionality to your React app. This guide will get you started with a login form that wraps around a demo app via create-react-app.

Afterwards, you will have a working React app with:

• Customized login and sign up flow, complete with post-login onboarding questions

• Secure, password-less email magic link sign up and login

• Google One Tap signup and login

Before you start

You need to set up a Feathery form with login functionality or use one of our prebuilt login templates. For this guide, we'll use the SaaS Signup and Onboarding template. If you do not use this template, you will need to configure your form to work with Stytch by following these instructions.

Want to skip to the end? Check out our example app.

But make sure to still replace the SDK key and form name placeholders with your own!

1. Create your new React app

The most common way to create a starter app is with the CLI tool create-react-app.

npx create-react-app login-provider-demo

2. Install Feathery

Once your starter app is generated, navigate to the directory that you just created. Then run the following command to install Feathery.

cd login-provider-demo
npm install @feathery/react

3. Initialize Feathery

Next, create a file src/FeatheryConfig.js and declare the following two variables with their appropriate values:

export const FEATHERY_SDK_KEY = "<YOUR_SDK_KEY>";
export const LOGIN_FORM_NAME = "<YOUR_LOGIN_FORM_NAME>";

Open src/index.js and add the following code to initialize Feathery.

// existing imports...
import { FEATHERY_SDK_KEY } from "./FeatheryConfig";
import { init } from "@feathery/react";

init(FEATHERY_SDK_KEY);
// existing react render code...

4. Add <LoginForm />

Include your login flow via the LoginForm component, and pass the authenticated portion of your application as children of the LoginForm. Edit your src/App.js file to match this.

The <LoginForm /> component will render its children components after the user has logged in.

import { LOGIN_FORM_NAME } from "./FeatheryConfig";
import { LoginForm } from "@feathery/react";

function App() {
  return (
    <LoginForm
      formProps={{ formName: LOGIN_FORM_NAME }}
      loginPath="/"
    >
      <div>Hello, World!</div>
    </LoginForm>
  );
}

export default App;

You're done! You now have an authenticated dashboard application accessible via a Feathery login flow.

Example: Add Routing to Login App

As an example of what a functional React app with both login and URL routing might look like, we will include a basic URL router.

npm install react-router-dom

Now, add it to your src/App.js file.

import { LOGIN_FORM_NAME } from "./FeatheryConfig";
import { LoginForm } from "@feathery/react";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider,
} from "react-router-dom";

function App() {
  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<div>Your Landing Page</div>}>
        <Route path="dashboard" element={<div>Your App Dashboard</div>} />
        <Route path="about" element={<div>About Us</div>} />
      </Route>
    )
  );

  return (
    <LoginForm
      formProps={{ formName: LOGIN_FORM_NAME }}
      // The path whitelisted for login in your auth provider's dashboard 
      loginPath="/"
    >
      <RouterProvider router={router} />
    </LoginForm>
  );
}

export default App;

Interacting with the Auth SDK

Feathery will dynamically load the appropriate JS SDK for your chosen auth integration. If you would like access to their SDK, you can listen to the onClientReady event or fetch it directly via useAuthClient().