This content originally appeared on DEV Community and was authored by Michael Bagley
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>
);
}
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.
Import this config file, along with EasybaseProvider and Auth:
import ebconfig from './ebconfig';
import { EasybaseProvider, Auth } from 'easybase-react';
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>
);
}
Run your project and create an example account by clicking 'No Account? Sign Up':
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>
);
}
All users will appear in the Easybase interface, under the Users tab:
For a more in-depth reference, check out the full walkthrough here.
This content originally appeared on DEV Community and was authored by Michael Bagley
Michael Bagley | Sciencx (2021-06-09T23:15:08+00:00) Instantly Add User Authentication to Your React Projects With Easybase’s <Auth /> Component. Retrieved from https://www.scien.cx/2021/06/09/instantly-add-user-authentication-to-your-react-projects-with-easybases-auth-component/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.