DevelopersLearnIt - Top Shelf Software Development Training

building-react-native-authentication-flow-with-redux-toolkit

Mobile application engineers will consistently need to implement authentication in their day to day app development. This could be because of many reasons like - limiting a region from unauthenticated clients, holding a few assets for just authenticated clients and so forth.

This article I will walk you through how to implement a straightforward yet a powerful and real-world authentication flow in react native application.

My main focus will be on the explanation of the process and will not talk about building and styling the all the screen layout. The complete source code is however available on my github repository.

Prerequisites

To follow along with this tutorial you need the following:

Node version ≥10.x.x installed
A package manager such as npm or Yarn
react-native-cli or expo-cli installed on your local machine

I will be using React Native version 0.64.3 and React Navigation version 6.x. For complete environment setup for react native development checkout the official documentation.

The Auth Flow

The authentication flow of the app will typically look like this:

The user launch the app.
The app tries to loads some authentication data from persistent storage (in our case AsyncStorage).
If auth data is found in the storage, this will be passed in to the auth state and the user will be presented with the main app.
If auth data is not found the user is presented with the authentication screen and will only be able to navigate through all the authentication screens only.
When the user signs out, all authentication data will be removed from the storage and auth state will be updated and user is sent back to authentication screens.

Creating React Native Project

Let's create our project by running this command:

The Approach

We want to prevent user from gaining access to all the main app screens by clicking on the back button after they have logged out. The best way to prevent this is to unmount all of the screens related to main app screens when they logout. To achieve this, we will be using React Navigation Library.

Adding Screens

Since we will be having some different set of screens for authenticated and unauthenticated users, let's create four screens within our src/screens folder- LoginScreen and RegisterScreen for unauthenticated users and DashboardScreen and AccountScreen for authenticated users.

Adding Navigation

Let's add React Navigation library. For a comprehensive documentation on adding navigation to your react native project can be found in React Navigation Library Docs

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. We will install some couple of libraries.

React Navigation Library Installations - React Native CLI

React Navigation Library Installations - Expo Native CLI

Installing the native stack navigator library

Creating the app native stack navigators

From the docs -createNativeStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator. Both of them are React components used for configuring the navigator. The Navigator should contain Screen elements as its children to define the configuration for routes.

Create a folder called navigations in the application's /src folder, and create three files in /src/navigations namely app-navigator.js, auth-navigators.js and navigator.js. As the name proposes,, the app-navigator will be use to configure the screens that will be vissible to authenticated users of the app, the auth-navigator will be used for unauthenticated users of the app, also, the navigator.js file is where we will decide which navigation stack to present dependent on application state.

Modify the auth-navigator.js like so:

Update the app-navigator.js like so too:

And navigator.js

Now we are done with the app's navigation. Implementing redux is next.

Adding Redux Toolkit and React-Redux

Redux is simply a store to store the state of the variables in your app. We will be using it to store our app authentication state.

Installing Redux Toolkit and React Redux

Create our Redux Store

Create a file named src/redux/store.js. Import the configureStore API from Redux Toolkit. We'll create the Redux store like this:

This creates a Redux store, but it's expecting authSlice, let's create that next.

Create a Redux State Slice

Add a new file named src/redux/slices/authSlice.js. In that file, import the createSlice API from Redux Toolkit.

Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.

Provide the Redux Store to React

Once the store is created, we can make it available to our React Native components by putting a React-Redux provider around our application in app.js. Import the Redux store we just created, put a provider around your app, and pass the store as a prop:

Implement State Change in the Navigation.js

We neen to modify our code in the navigation.js file so that isLoggedIn variable is been pulled from our redux store. Import useSelector from react-redux and selectIsLoggedIn from authslice like so:

import { useSelector } from 'react-redux';

import { selectIsLoggedIn } from '../redux/slices/authSlice';

The complete code should look like this:

Implement Login Logic

In the LoginScreen.js, let's make a new function named handleLogin. In the function, we will dispatch setSignIn action of our redux slice and pass in the state object to update the auth variables

And the complete LoginScreen should look like this:

When the user enters all login credentials and clicks on the login button, an action to update the store variable is sent. Based on this, the stack navigator (screens) to be mounted is determined by the variables in our store. In this case isLoggedIn will be true, so the user will be sent to the dashboard screen.

Implementing the SignOut Logic

We only need to do just one thing in the dashboardscreen.js. We are only going to dispatch the setSignOut action without any parameter to alter the sate variable in our redux store.

Conclusion

In this article, we learned how configure React Navigation in a React Native App, and also configure Redux Toolkit to implement authentication flow in React Native app. The complete source code can be found in my github respository.

Source Code

In this tutorial I will be walking you through how to create a tinder swipe questionnaire with ionic5 gestures.

In February 11, 2020 Ionic announced the release of a new version - Ionic5, and one of the top feature that was introduced is the Gestures. This is better than having to install hammerjs.

Creating a blank App

Let's start by creating a new blank ionic5 project by running the command below

Building the questions card

Since we are going to have more than one question, we will start by creating some dummy questions. So in the home.page.ts file let add the following code.

The next thing is to create those cards based on the questions in the html page of our app.

Modify the code in home.html file by adding the following code within the ion-content.

The result of the app should look like this:

Let modify our questions card so that they can be stacked on each other. Open the home.page.scss and paste the css below:

Now our cards are stacked on top of each other like this:

We need to show some part of the cards behind the first card so that people can know that we have more than one card and also fix the question 5 of 5 to be question 1 of 5.

To achieve this, we are going to add some style attribute namely transform and opacity to the ion-card component in our app like so:

With this in place, our app should now look like this:

Implementing the Swipe Effect

We are now set to implement the swipe effect by using ionic gestures.

In the home.page.ts file import GestureController, ElementRef, ViewChildren etc like so:

import { Component, ElementRef, AfterViewInit, ViewChildren, QueryList } from '@angular/core';
import { GestureController, IonCard, Platform } from '@ionic/angular';

The next thing is to make sure that our app home page implements AfterViewInit because we are going to be implementing the login after all views has been initialized.

We need to be able to make reference to the ionic-card component in our app's html, so we will be using the viewchildren so that we can query the list of cards in our app like so:

 @ViewChildren(IonCard, { read: ElementRef }) tinderCards: QueryList<ElementRef>;

Let's create the method to set up our gesture. Copy and paste the following code:

We can now call this function within our ngAfterViewInit like so:

 ngAfterViewInit() {
    const tinderCardArray = this.tinderCards.toArray();
    this.setGesture(tinderCardArray);
  }

The full code in the home.page.ts should now look like so:

We now have a fully functioning swipe questionnaire. Hope this helps.

building-ionic-4-calculator-with-css-grid-layout

Source Code

In this tutorial, I will build a beautiful ionic4 calculator template using css grid layout.

Article Objective

This tutorial shows developers how easy it became with the new CSS Grid.

Prerequisites

You need to have some experience with Ionic Framework and CSS before taking this tutorial as I won’t be explaining the basics of CSS. I will only concentrate on the parts that are relevant to Grid layout.

It is also recommended that you use either chrome or Firefox browser for this tutorial as they both have a great inspector that help developers during development.

Getting Started

I will start by creating a blank ionic 4 project by running the command below:

ionic start ionic4-calculator blank

Open the project up in visual studio code, then clean up the home page in src/app/home/home.page.html.

The Layout Markup

The calculator has two parts - the display screen and the keypad. Let's start by creating a basic structure. Add two divs within the ion-content of the home.page.html file like so:



188 x 8

1504

Switch to src/app/home/home.page.scss file and add the style like so:

.screen-section{   
    height: 30%;
    background: #fff;
    padding:10% 5%;   

    h1{
        font-size: 4rem;
        color:rgb(94, 96, 97);
    }
    h3{
        color:#B9BBBD;
        font-size: 2rem;
    }

    h3,h1{       
        text-align: right;
        line-height: 100%;
    }


}

.button-section{    
    height: 70%;
}

The Keypad markup

As you can see, we just have a bunch of buttons with special classes.

Button Styles
Add the following style to the home.page.scss file to make the buttons look better.

 button {      
      background-color: #fff;
      border-width: thin;
      border: solid 0.5px  #ECEDF4;
      background-color: transparent;
      font-size: 2rem;
      color: #6A6D71;     
    }

 .operator {
      color: #fff;
      background: #283B50;
    }

    .special-operator{
      background: #F3F9FF;
    }    
  

    .equal-sign {
      background-color:#51C9CA;
      border-color: #51C9CA;
      color: #fff;
    }

Our calculator should look like so:

As you can see, our calculator buttons look is better. But the buttons are not well arranged. Let's deal with that next.

Arranging the buttons with CSS Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. An HTML element turns to a grid container when its display property is set to grid.

In our own case, we need to set the display property of our .button-section to grid.

.button-section{
height: 70%;
display: grid;

}

By adding that property the calculator should now look like so:

The .button-section div has become grid container and the buttons are now grid items. However, we want our calculator keys to be in four columns and not stacked on each other like we currently have.

Defining Columns and Rows

To define rows and column for a grid container we need to use the grid-template (rows or columns) in our own case we want four columns. Add the grid-template-columns property to the .button-section div like so:

.button-section{
  height: 70%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Here, we’ve created four columns with each one taking 1 part of the available space. So each column will have the same width regardless of the size of the grid container. With that added our app should now look like so:

The app is almost done, but we still have a problem, if you look at the last row you notice that we have only three buttons instead of four like the other rows. We need to make sure that the zero button takes two columns in other to fill the empty column at the bottom of the calculator. Let us do that next. Add the style below to the home.page.scss file like so:

.button-section{
 .zero-button {
      grid-column-start: 1;
      grid-column-end: 3;      
    }

}

Full home.page.html page code

.button-section{
 .zero-button {
      grid-column-start: 1;
      grid-column-end: 3;      
    }

}

.button-section{


}

The app should now look like so.

In this article, I have shown you how easy it creating a layout with CSS Grid.

Thanks for reading!.

Subscribe to: Posts ( Atom )

featured Slider

Building an Efficient React Native Authentication Flow With Redux ToolKit And AsyncStorage

Prerequisites

The Auth Flow

Creating React Native Project

The Approach

Adding Screens

Adding Navigation

Creating the app native stack navigators

Adding Redux Toolkit and React-Redux

Implement State Change in the Navigation.js

Implement Login Logic

Implementing the SignOut Logic

Conclusion

Parsing JSON Like Pro in Flutter

Simple Json Structure

The dart:convert library

Serialize the Inline way

Serialize the Model Classes way

Create Tinder Swipe Questionnaire with ionc5 Gestures

Creating a blank App

Building the questions card

Implementing the Swipe Effect

Building Expandable Master And Details Table with JQuery Datatable and Ajax in ASP.Net MVC

Prerequisites

How to create Master-Details Grid

Building the data access in ASP.Net MVC

Create Product Repository

The Interface

The Repository Class

The Controller

The Application View

Displaying the Details

The Ajax Method

Conclusion

Using Jodit Editor To Build A WYSIWYG Editor with file upload support in ASP.Net Core

Jodit Basic Setup

Usage

Adding Support for File Upload

Building Full Instagram Clone with Ionic 4 and Firebase Firestore Part 1

Prerequisites

Creating ionic project

Coding the Login Page

Building Ionic 4 Calculator Theme Using CSS Grid Layout

Article Objective

Prerequisites

Getting Started

The Layout Markup

188 x 8

1504

The Keypad markup

Arranging the buttons with CSS Grid

Defining Columns and Rows

About Me

Popular Posts

Like us