DEV Community

loading...
Cover image for Instantly Add User Authentication to Your React Projects With Easybase’s  Component

Instantly Add User Authentication to Your React Projects With Easybase’s Component

mbagley1020 profile image Michael Bagley ・2 min read

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)

Forem Open with the Forem app