DEV Community

Cover image for Instantly Add User Authentication to Your React Projects With Easybase’s <Auth /> Component
Michael Bagley
Michael Bagley

Posted on

Instantly Add User Authentication to Your React Projects With Easybase’s <Auth /> Component

User Authentication can be a difficult module to implement and manage in web and mobile applications. There's a lot to consider when it comes to security, JWTs, salting, and much more.

Fortunately, this can be accomplished instantly with the <Auth /> component (<NativeAuth /> for React Native) from the 'easybase-react' package.

The final result will look like this:

export default function App() {
  return (
    <EasybaseProvider ebconfig={ebconfig}>
      <Auth>
        <h2>You're In!</h2>
      </Auth>
    </EasybaseProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Easybase Auth


The Process

Create a free account at easybase.io and make a Project. From there, download your ebconfig token and place it in your React project's src/ folder. Install the package with npm i easybase-react.

Easybase auth 3

Import this config file, along with EasybaseProvider and Auth:

import ebconfig from './ebconfig';
import { EasybaseProvider, Auth } from 'easybase-react';
Enter fullscreen mode Exit fullscreen mode

Wrap your entire component in EasybaseProvider and place Auth inside of it. Children of Auth will only be loaded and displayed if a user is currently signed in.

export default function App() {
  return (
    <EasybaseProvider ebconfig={ebconfig}>
      <Auth>
        <h2>You're In!</h2>
      </Auth>
    </EasybaseProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

Run your project and create an example account by clicking 'No Account? Sign Up':

Easybase auth 4

This will sign you in! The <Auth /> component is highly customizable when it comes to CSS and forms, read here for customization.

To sign out, import useEasybase and call the signOut function:

function User() {
  const { signOut } = useEasybase()
  return <button onClick={signOut}>Sign Out</button>
}

export default function App() {
  return (
    <EasybaseProvider ebconfig={ebconfig}>
      <Auth>
        <User />
      </Auth>
    </EasybaseProvider>
  );
}
Enter fullscreen mode Exit fullscreen mode

All users will appear in the Easybase interface, under the Users tab:

Easybase auth 5

For a more in-depth reference, check out the full walkthrough here.

Discussion (0)