DEV Community

loading...
Cover image for How to Easily Implement User Authentication in React With Easybase

How to Easily Implement User Authentication in React With Easybase

mbagley1020 profile image Michael Bagley ・2 min read

Hello! Today I'm going to detail how to easily implement user authentication in your react projects. I'll keep it as brief as possible.

1) In your project directory, install the easybase-react library with npm i easybase-react.

2) Wrap your application's root component in the EasybaseProvider like so:

import { EasybaseProvider, useEasybase } from "easybase-react";   

function App() {
    return (
        <EasybaseProvider>
            <ProjectUser />
        </EasybaseProvider>
    )
}
Enter fullscreen mode Exit fullscreen mode

3) Create a project at Easybase and download your ebconfig.js token. Pass this to the EasybaseProvider like so:

import { EasybaseProvider, useEasybase } from "easybase-react";   
import ebconfig from "ebconfig.js";    

function App() {
    return (
        <EasybaseProvider ebconfig={ebconfig}>
            <ProjectUser />
        </EasybaseProvider>
    )
}
Enter fullscreen mode Exit fullscreen mode

4) Create a component that uses isUserSignedIn() for conditional rendering based on the user's authentication status.

function ProjectUser() {
    const { isUserSignedIn, signIn, signUp } = useEasybase();

    if (isUserSignedIn()) {
        return (
            <div>
                <h2>You're signed in!</h2>
            </div>
        )
     } else {
        return (
            <div>
                <h2>User not authenticated :( </h2>
            </div>
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

5) Implement workflow for users to sign in and sign up via the signUp() and signIn() functions from the useEasybase hook. Your component could work as follows:

const [usernameValue, setUsernameValue] = useState("");
const [passwordValue, setPasswordValue] = useState("");

if (isUserSignedIn()) {
    return (
        <div>
            <h2>You're signed in!</h2>
            <button onClick={_ => getUserAttributes().then(console.log)}>
                Clicking me only works if your authenticated!
            </button>
            <FrameRenderer />
        </div>
    )
} else {
    return (
        <div style={ { display: "flex", flexDirection: "column" } }>
            <h4>Username</h4>
            <input value={usernameValue} onChange={e => setUsernameValue(e.target.value)} />
            <h4>Password</h4>
            <input type="password" value={passwordValue} onChange={e => setPasswordValue(e.target.value)} />
            <button onClick={_ => signIn(usernameValue, passwordValue)}>
                Sign In
            </button>
            <button onClick={_ => signUp(usernameValue, passwordValue)}>
                Sign Up
            </button>
        </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

A few notes on this implementation:

  • You can use onSignIn() to run a callback function whenever a user signs in (manually from the signIn() function or automatically from temporary tokens stored on a user's device).
  • Creating an easybase account is free.
  • Authenticated users can also make valid calls to your tables in Easybase. Here's some info on stateful database array w/ Easybase and React.

Thanks for reading!

Discussion

pic
Editor guide
Collapse
okbrown profile image
Orlando Brown

Hi, do you reckon it would be a bit more clear if you were to include that this is specifically for Easybase in the title? I can only imagine someone less experienced seeing this for the first time and and probably including this in their project when it might not be the best solution for them.

Collapse
mbagley1020 profile image
Michael Bagley Author

Good point! I'll change it now

Collapse
calag4n profile image
calag4n

It seems pretty cool.

Collapse
blessingartcreator profile image
Blessing Hirwa

good post. I like it for real.

Collapse
mbagley1020 profile image