AuthUI – Best Authenticate Component for React


AuthUI is a best cross-platform authenticate components for react-native, react-native-web, styled-components, graphql. When starting a new project, it takes some effort to implement Login / Sign-up screens.

AuthUI – Best Authenticate Component for React
Authenticate Component for React

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.

You must read this also:

Application flows:

  • Include the Login Component into the main app and customize it:
  • The Login Component will make requests to AuthUI login or signup graphql endpoint.
  • AuthUI endpoints will respond with a JWT token (contains userId).

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

AuthUI - Best Authenticate Component for React
AuthUI – Best Authenticate Component for React

Import and use Login Component

Handle Authenticate Component response

After the 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 the user to the home page, dashboard, etc.

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).

See the real example: