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.

logged in example

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.

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

test env enabled

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

default login page

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

Installation

First, install the @propelauth/react library in your existing React application. If you don’t have a React application yet, follow these instructions.

$ npm install --save @propelauth/react

Configuration

We need to point our React application to our test environment to fetch the current user’s information. Go to the Frontend Integration section of your PropelAuth dashboard, and copy the auth url into an .env file:

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

Then, set up your test environment to use port 3000 (the default for React, if you are using a different port, enter that instead). This will configure your application to receive requests from localhost:3000 and it will now redirect to localhost:3000 after you log in.

configure port 3000

Initialization

In your index.js or index.ts file, wrap your application with the AuthProvider

index.js
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")
);

The AuthProvider is responsible for fetching the current user’s authentication information. If your entire application requires the user to be logged in (for example, for a dashboard), use RequiredAuthProvider instead and you’ll never have to check isLoggedIn.

Display user information

Here’s a component which displays the current user’s email address:

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>
    }
});

withAuthInfo is a higher order component which will inject useful properties like isLoggedIn, user, and accessToken into your components. You can also use hooks like useAuthInfo to access this information. Check out the reference for more information.

We also used useRedirectFunctions to redirect to the login, signup, and account pages and we used useLogoutFunction to log the user out.

When you aren’t logged in, you’ll see:

logged out state

And when you do log in, you’ll see:

logged in state

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.