DEV Community

Cover image for Auth in your react app!
Muse'
Muse'

Posted on

Auth in your react app!

When starting a new project, it takes some effort to implement Login / Sign-up screens. We often have to repeat the same implementation again and again.

Authentication should be simple to remove friction to build an MVP (Most Viable Product) or get users started. Authentication logic should be reused to save development time.

There are a few online services that let you integrate your application with their Authentication APIs. But it doesn't really save much time when we have to go through long documentation to understand it, then spend more time learning and integrating.

An Authentication Service should be simple to integrate with. Below is an example:

Step 1 - Import and use Login Component

Alt Text

Step 2 - Handle response
After user submitted the form (Sign up or Log in), the "afterSubmit" callback function will be called. Here you can handle the response (full User object) by redirecting user to the home page, dashboard, etc.

Alt Text

jwtData is the user object which has properties like: user uuid, accessToken, email, name, picUrl, etc. which can be used in the app (or store in localStorage).

That's it!
There is no Step 3. In the next article, I will write more about how it works. In the meantime, there is more information in the link below:

AuthUI Repo - (https://github.com/authui/authui)

Happy Coding!

Top comments (0)