Readymade auth and auth UI implementations for your React Native apps

Landing screen

Wouldn’t it be great if you could jump straight into your business logic without having to write tedious auth code? Our react-native-auth-boilerplate can help you do this. It comes with a neat looking authentication UI implemented using NativeBase and a powerful Postgres backend using the Hasura auth APIs.

Usage

Why should you use it?

  • Common authentication use-cases are covered: The main screen renders list of login methods: Username/Password, Email, Mobile OTP, Google, Facebook. If only one of the methods are enabled, the login screen is directly rendered. After the authentication is complete, a very familiar screen is rendered, similar to the screen you see when you start building a react native app :). Therefore, your development workflow remains the same, but with authentication implemented from the beginning.
Screen rendered after successful authentication
  • You get the necessary props: The screen rendered after authentication gets two props called logoutCallback and sessionInfo. You can call the this.props.logoutCallback() function whenever you wish to log your users out. sessionInfo is an object that can be used to determine the identity of a logged in user.
  • Session is persisted: Obviously we do not want our users to login every time they open the app. Whenever a user logs in, their session is stored locally on the device. So they do not have to login again unless you deliberately log them out.
  • You have the source code: Since this is a boilerplate and not an npm module, you have the entire source code with you. You can style it as per your application’s requirements. The code is fairly modularised and gives you the flexibility of handling the sign-in and sign-up logic however you want.
  • You can add or remove login methods on the fly: If you wish to add or remove one or more login methods, you can do it from your backend without touching the client code. You simply have to enable or disable an auth provider on your Hasura cluster and the changes will be reflected in your app.
  • It is available with and without the expo SDK. You can use the version you are more comfortable with.

To use the react-native-auth-boilerplate, just head to the git repo. The guide to configuring it is present in the README.md file. It is open source, so if you wish to request a feature, report a bug or contribute to the project, just open an issue and you will get a reply soon.

Psst…. Have you tried building a React Native app with Hasura? Check out a React Native app with a NodeJS backend boilerplate here: https://hasura.io/hub/projects/hasura/hello-react-native. All project boilerplates on Hasura come with a Dockerfile and Kubernetes spec files that you can customize as you wish!

Hasura gives you instant GraphQL APIs over any Postgres database without having to write any backend code.



Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.