Login Embed Tutorial
Step-by-step guide to adding a login, signup, and onboarding flow to your website.
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
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.
But make sure to still replace the SDK key and form name placeholders with your own!
npx create-react-app login-provider-demo
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
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...
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.
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;
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().
Last modified 6mo ago