GithubHelp home page GithubHelp logo

antonhansel / react-native-auth-boilerplate Goto Github PK

View Code? Open in Web Editor NEW
2.0 2.0 28.0 15.53 MB

A react native boilerplate with authentication already implemented

JavaScript 92.96% Python 1.58% Java 1.46% Objective-C 4.01%

react-native-auth-boilerplate's Introduction

React Native Auth Boilerplate

This is a React Native boilerplate with auth already implemented. It uses Nativebase for UI and Hasura APIs for backend.

gif

You can also use it without Hasura, but you will have to write your own backend implementation.

You can use it with and without the Expo SDK.

Try out on Expo

Scan this QR Code from your Expo application to try out this application.

gif

Who should use this?

  • Fullstack React Native developers looking to start building an app with authentication already covered.
  • Developers at a hackathon trying to build React Native applications from scratch.
  • Developers who want a working authentication backend to further customize it as per their requirements.
  • Developers trying to use Hasura with React Native.
  • Developers who need basic authentication UI and want to write the backend logic themselves.

Getting Started

With Hasura APIs

Make sure to have hasura CLI installed.

  • Clone the repo and cd into it.

    $ git clone https://github.com/hasura/react-native-auth-boilerplate
  • cd into expo directory if you wish to use the expo SDK or cd into vanilla directory

  • Quickstart the base Hasura project and apply the configuration of the project to the newly created Hasura cluster

    $ hasura quickstart base
    $ cd base
    $ git add . && git commit -m "Applying configuration"
    $ git push hasura master

The hasura quickstart command clones a base Hasura project with basic configuration and creates a free tier Hasura cluster. Running a git push to the hasura remote applies the configuration from the project (here base) to the cluster.

  • You will obtain a cluster name after running hasura quickstart. Go back to the expo (or vainalla) directory and set this clusterName in Hasura.js. Also set useHasuraApis to true.

    const clusterName = "clustername44";
    const useHasuraApis = true;
  • Install node modules and run the app.

    $ npm install
  • Run the app.

    • If you are using Expo,

      $ npm start
    • If you are using vanilla React Native,

      # For Android
      $ react-native run-android
      
      # For iOS
      $ react-native run-ios

To get started with React Native development using Hasura, head to hasura/hello-react-native on Hasura hub.

Without Hasura APIs

You have to configure login methods if you are not using Hasura APIs. Check the detailed instructions for about configuration.

Detailed Instructions for Usage

Contribute

We will be very glad to receive contributions from the community. Check issues with the label "help wanted" and submit a pull request.

If you have a bug report or a feature request, please open an issue.

Gallery

Login with Username

iOS

iosusername

Android

androidusername

Login with Email

iOS

iosemail

Android

androidemail

Login with OTP

iOS

iosotp

Android

androidotp

Google and Facebook

iOS

iossocial

Android

androidsocial

react-native-auth-boilerplate's People

Contributors

wawhal avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.