Usage with React

This guide is for integrating Reflow Auth in client-side React apps.

For Next.js projects, please refer to the auth-next library docs.

Including our Auth hook in your React project can supercharge your app with user registrations and sign in with minimal code changes in your project. Here are some of the benefits:

• You get support for a number of sign in services - Google, Apple, Facebook, Twitter, Discord and Github, with intelligent conflict resolution.
• Rich user info is made available to your app consisting of a name, email and profile photo, with methods for updating the user data from the client.
• The login status is synced between devices and tabs in real time, you don't need to establish communication channels yourself, the hook handles everything.
• Storing meta data in the user object, which makes it perfect for user preferences.
• User data is securely stored in Reflow with the ability for a full data wipe and session invalidation.
• Easily authenticate cloud functions and backend routes with JWT.

Installation

We've streamlined the integration of Reflow Auth in your project. All that's needed is to install our React hook:

npm install @reflowhq/auth-react

You can then use the useAuth hook in your components:

import React from "react";
import useAuth from "@reflowhq/auth-react";

export default function App() {
  const auth = useAuth({ projectID: "123456789" });

  return (
    <>
      {auth.isSignedIn() ? (
        <div>
          <h1>Welcome, {auth.user.name}</h1>
          <p>Email: {auth.user.email}</p>
          <img src={auth.user.photo} alt="Profile" />
          <button onClick={() => auth.signOut()}>Sign Out</button>
        </div>
      ) : (
        <div>
          <h1>To sign in, click the button below</h1>
          <button onClick={() => auth.signIn()}>Sign In</button>
        </div>
      )}
    </>
  );
}

If you've already gone through the process of setting up auth, this code is all that it takes to show a sign in window and have the visitor create a user account.

You can see the full docs with all available methods in the library repo.

Here are a few live examples which you can play with in your browser.

Simple sign in with React

You can see the authentication hook in action below. You can browse through the example files and edit it live.

Editing profile data

Editing the user profile and meta data is also supported. The main code in this example is in the App.js and Edit.js files, which you can see by expanding the sidebar of this code demo:

You can find the source code for this example in our repo.

Note

You can change the order of sign-in buttons for your enabled social auth providers from the Sign In settings page (Settings > Sign In).

Note

While developing and testing your app, you can enable the test mode parameter to try out user authentication without creating live-mode users in your Reflow project.

Visit the test mode docs to learn more.