In this guide, we’re going to quickly set up signup, login, and account pages with PropelAuth. Then we’ll hook up our frontend to display the current user’s information.

Just a little bit of code gives us this, signup, login, 2FA, and more

​

Set up Signup, Login, and Account pages

After signing up for PropelAuth, create a project. A project includes everything you need to set up authentication, like UIs, a dashboard for managing your users, transactional emails, and more.

Once we’ve created a project, we’re actually done with this step.

PropelAuth hosts UIs for you to get you live as quickly as possible. These UIs are configurable, but down the road you can also use our component library to take full control over these pages.

On your dashboard, you’ll see that you now have a test environment to play around with:

Click the Login Page under the View our hosted UIs button and you’ll be directed to the login page for your application.

This is what your users will see when they go to log in to your product

Everything about this page is configurable, from the color scheme and logo, to the login options we present to the user (passwords, passwordless, SSO, etc.). We’ll worry about configuring it later - instead lets connect our frontend.

​

Set up our frontend to display the current user’s information

We’ve seen that our users can already sign up and log in, but how do we access that information in our product?

PropelAuth provides frontend libraries for frameworks like React, no-code tools like Webflow, and vanilla javascript which expose interfaces for accessing the current user’s information.

​

Choose your framework

• React

• Next.js

• Javascript / Typescript

• Webflow / No-code tools

$ npm install --save @propelauth/react

# Test environment only, in production, we'll use our own domain
REACT_APP_AUTH_URL=https://something.propelauthtest.com

import { AuthProvider } from "@propelauth/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <AuthProvider authUrl={process.env.REACT_APP_AUTH_URL}>
    <YourApp />
  </AuthProvider>,
  document.getElementById("root")
);

const YourApp = withAuthInfo((props) => {
    const {redirectToLoginPage, redirectToSignupPage, redirectToAccountPage} = useRedirectFunctions()
    const logoutFunction = useLogoutFunction()

    // isLoggedIn and user are injected automatically from withAuthInfo
    if (props.isLoggedIn) {
        return <div>
            <p>You are logged in as {props.user.email}</p>
            <button onClick={redirectToAccountPage}>Account</button>
            <button onClick={logoutFunction}>Logout</button>
        </div>
    } else {
        return <div>
            <p>You are not logged in</p>
            <button onClick={redirectToLoginPage}>Login</button>
            <button onClick={redirectToSignupPage}>Signup</button>
        </div>
    }
});

Great! We now have a powerful, flexible authentication experience for our users. And for us, we have all the building blocks we need to set up our product.