James Ellis

James Ellis

1566286719

Secure Your React and Redux App with JWT Authentication

If you’ve worked with React at all, chances are you’ve at least heard of Redux. But you may not know what it is, how it fits in with React, or how to use it in your app. It can sometimes be complicated to set up but can be a very useful addition to a React app depending on your use cases.

And if you’ve done much work with web apps, you also probably know how hard it can be to deal with user authentication - storing usernames and passwords safely and securely is tough to do right. Using a third party you trust for authentication means you can rely on their backbone to make sure your app is secure. When a user authenticates with someone else, your app receives a JSON Web Token (JWT) that makes it really easy to know who someone is and verify their claims without any of the hassles that normally come with storing user information.

In this tutorial, I’ll show you how to create a React app that uses Redux for state management, how to secure your application using Okta, and how to decode the JWT in the client to make authorization decisions without relying on another call to the server. You’ll be able to use the token’s payload in order to determine what type of access to permit to a user. For this app, I’ll just have you build a search bar for a set of users.

What is Redux?

Redux is a state management tool that helps keep your app organized. While it can be used on its own or with another view library, it’s quite commonly used with React. You might not need it in your app, and there are some downsides to using it, but it also has many advantages. It would be worth weighing the pros and cons before deciding on using it for your app.

Some advantages to using Redux include:

  • Components can access the state without needing to pass props through many levels of children
  • A central store makes it easy to separate view layers from business logic
  • Time travel debugging provides an easy way to rewind the state and can help track down bugs
  • State is preserved during development when using Hot Module Replacement
  • Myriad of add-ons available for things like using asynchronous actions or persisting state to local storage

Some disadvantages include:

  • Components can access the state without needing to pass props through many levels of children
  • A central store makes it easy to separate view layers from business logic
  • Time travel debugging provides an easy way to rewind the state and can help track down bugs
  • State is preserved during development when using Hot Module Replacement
  • Myriad of add-ons available for things like using asynchronous actions or persisting state to local storage

How to Build a Simple React App with Redux

On to the coding! If you don’t already have Node installed, I highly recommend installing it via a tool called NVM, which makes it easy to upgrade and switch between different version of Node. The simplest way to install it is with the following command, but if you run into issues you can check out the installation guide. If you already have Node installed, don’t worry about this step.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

Next, you’ll need to set up the project. If you don’t already have them installed, install yarn and create-react-app:

npm i -g yarn@1.16.0 create-react-app@3.0.1 

Now use create-react-app to bootstrap a new React project, then install a few dependencies. Redux is pretty un-opinionated and flexible, but to keep things simple they have a more opinionated set of tools called redux-starter-kit. Instead of connecting to a backend, you’ll just be using fake data for now - faker is great for that:

create-react-app react-redux-jwts
cd react-redux-jwts
yarn add redux@4.0.1 react-redux@7.1.0 redux-starter-kit@0.5.1 faker@4.1.0

You can start the app now with yarn start, which will watch for any changes you make to any files and automatically reload the page. You should now see the default app up at [http://localhost:3000](http://localhost:3000 "http://localhost:3000").

One popular redux methodology is known as Ducks, where instead of having all your reducers in one place, actions in another place, etc, you organize them by modules. In this app, you’ll have a users module and an auth module.

Create a folder to store your redux modules in:

mkdir src/redux 

Using the redux-starter-kit, create a slice, which is essentially one piece of the global state that will manage the state reducers, and actions for one module. In a new file, add the following:

src/redux/users.js

import { createSlice } from 'redux-starter-kit';
import faker from 'faker';

const users = [...new Array(1000)].map(() => ({
  id: faker.random.uuid(),
  avatar: faker.image.avatar(),
  username: faker.internet.userName(),
  name: `${faker.name.firstName()} ${faker.name.lastName()}`,
}));

const { actions, reducer } = createSlice({
  initialState: {
    users,
    selected: null,
  },
  reducers: {
    selectUser(state, { payload: user }) {
      state.selected = user || null;
    },
  },
});

export const { selectUser } = actions;

export default reducer;

You’ll also need to create a store to manage the state for each piece.

src/redux/index.js

import { configureStore } from 'redux-starter-kit';
import users from './users';

export default configureStore({
  reducer: {
    users,
  },
});

Now in your main App.js file, you’ll need to set up the React Redux provider so that components anywhere in the tree can connect to the store.

src/App.js

// Add these lines to the top of the file
import { Provider } from 'react-redux';
import store from './redux';


// At the bottom of the file, replace `export default App` with the following:

export default () => (
  
    
  
);

Add a UI to Your React App with Semantic UI

OK, now Redux is hooked up, but nothing is actually subscribing to the store yet. One UI framework that’s easy to work with is Semantic UI. For searching through users, a nice, local JavaScript search engine is Fuse.js. Add them as dependencies:

yarn add semantic-ui-react@0.87.2 semantic-ui-css@2.4.1 fuse.js@3.4.5 

Here you’ll create three new components:

  1. A header for the page
  2. An autocomplete search input
  3. A card to display the selected user

To start, add the header:

src/Header.js

import React from 'react';
import { connect } from 'react-redux';

import logo from './logo.svg';
import { Container, Menu, Image } from 'semantic-ui-react';

const Header = ({ pageName }) => (
  
    
      
        
        User Search
      
      {pageName}
    
  
);

const mapStateToProps = state => ({
  pageName: state.users.selected ? state.users.selected.name : '',
});

export default connect(mapStateToProps)(Header);

The mapStateToProps function allows you to take the state from the redux store and convert it to props to be passed into the component. The connect function wraps the component and does the work necessary to actually connect to the store and pass in those props.

Next create the search component:

src/Search.js

import React from 'react';
import { connect } from 'react-redux';
import { Container, Search } from 'semantic-ui-react';
import Fuse from 'fuse.js';

import { selectUser } from './users';

const SearchPage = ({ users, selectUser }) => {
  const [term, setTerm] = React.useState('');
  const filteredUsers = React.useMemo(() => {
    if (!term) return users;
    const fuse = new Fuse(users, {
      shouldSort: true,
      keys: ['name', 'username'],
    });

    return fuse.search(term);
  }, [users, term]);

  return (
    
      <Search
        onResultSelect={(e, { result }) => {
          setTerm('');
          selectUser(result.user);
        }}
        onSearchChange={e => setTerm(e.currentTarget.value)}
        results={filteredUsers.slice(0, 5).map(user => ({
          childKey: user.id,
          title: user.name,
          description: user.username,
          image: user.avatar,
          user,
        }))}
        value={term}
      />
    
  );
};

const mapStateToProps = state => ({
  users: state.users.users,
});

const mapDispatchToProps = { selectUser };

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(SearchPage);



This component makes use of React’s relatively new Hooks API. The search term will be kept local to this component rather than storing it globally in Redux, since other components don’t need to know what the search term is, just whether something’s selected or not.

The useMemo hook makes it so that if there are multiple renders of the component, the search will only be done once. Searching can be a relatively expensive operation, especially as the dataset grows in size.

This uses mapStateToProps again to get the list of users and the selected user. What’s new here is mapDispatchToProps. This is how you connect to an action creator to dispatch an action to the Redux store. Rather than setting the state manually, you send an action to Redux, which then sends the action to the reducer to modify the state. Here you’re using the selectUser action creator to select a user.

Next, create a component to display the selected user:

src/SelectedUser.js

import React from 'react';
import { connect } from 'react-redux';
import { Message, Card, Image } from 'semantic-ui-react';

import { selectUser } from './users';

const SelectedUser = ({ selected, selectUser }) => {
  if (!selected) return null;

  return (
    
      <Message
        attached
        header={selected.name}
        onDismiss={() => selectUser(null)}
      />
      
      
        {selected.username}
      
    
  );
};

const mapStateToProps = state => ({
  selected: state.users.selected,
});

const mapDispatchToProps = { selectUser };

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(SelectedUser);

This connects to the same pieces of state to know which user is selected. If none is selected, this simply won’t render anything. Otherwise, you’ll get a card showing the user. You’ll also get a button to deselect the user, so you’ll also need to subscribe to the selectUser action creator here.

In your src/index.js file, replace the ./index.css import with the Semantic UI css.

import 'semantic-ui-css/semantic.min.css'; 

Your App.js file now needs to reference the new components you just made. Your App.js file should end up looking like this:

src/App.js

import React from 'react';
import { Provider } from 'react-redux';
import { Container } from 'semantic-ui-react';

import store from './redux';

import Header from './Header';
import Search from './Search';
import SelectedUser from './SelectedUser';

const App = () => (
  
    
    
      
      
    
  
);

export default () => (
  
    
  
);

Go ahead and give it a whirl! You should be able to search through a set of (fake) users, select one, choose another, etc.

Add Authentication to React with okta

One simple way to add authentication to your project is with Okta. Okta is a cloud service that allows developers to create, edit, and securely store user accounts and user account data, and connect them with one or multiple applications. Our API enables you to:

  • Components can access the state without needing to pass props through many levels of children
  • A central store makes it easy to separate view layers from business logic
  • Time travel debugging provides an easy way to rewind the state and can help track down bugs
  • State is preserved during development when using Hot Module Replacement
  • Myriad of add-ons available for things like using asynchronous actions or persisting state to local storage

If you don’t already have one, sign up for a forever-free developer account. Log in to your developer console, navigate to Applications, then click Add Application. Select Single-Page App, then click Next.

Since Create React App runs on port 3000 by default, you should add that as a Base URI and Login Redirect URI. Your settings should look like the following:

Click Done to save your app, then copy your Client ID and paste it as a variable into a file called .env.local in the root of your project. This will allow you to access the file in your code without needing to store credentials in source control. You’ll also need to add your organization URL (without the -admin suffix). Environment variables (other than NODE_ENV) need to start with REACT_APP_ in order for Create React App to read them, so the file should end up looking like this:

.env.local

REACT_APP_OKTA_CLIENT_ID={yourClientId} REACT_APP_OKTA_ORG_URL=https://{yourOktaOrgUrl} 

Okta allows you to add users to groups. For example, you can have an Admins or Managers group. By default, each user is already in the Everyone group. For this tutorial, I’ll be showing you how to determine which groups your user is in. This does require a little extra configuration for your Okta application.

While you’re still signed in to your Okta account:

  • Components can access the state without needing to pass props through many levels of children
  • A central store makes it easy to separate view layers from business logic
  • Time travel debugging provides an easy way to rewind the state and can help track down bugs
  • State is preserved during development when using Hot Module Replacement
  • Myriad of add-ons available for things like using asynchronous actions or persisting state to local storage

Next, navigate to Users -> Groups. Click the Add Group button and create a new group called Admins, and give it a friendly description, then click Add Group.

Click on the new group you just created, then click Add Members and type your name into the search bar, then click the Add button next to your user. It will help for testing if you have another account that’s not in the Admins group.

Connect Okta to Your React App

Now that your Okta application is ready to go, you’ll need to install a couple more dependencies to connect Okta to your React app.

yarn add @okta/okta-react@1.2.0 react-router-dom@5.0.1 

Restart your server in order to pick up the new environment variables from .env.local. You can do this by closing the terminal hosting it or with ctrl-C, then using yarn start again to start it back up. To set up your app for listening to Okta, you’ll need to add some more context wrappers to App, as you did with React Redux’s Provider component:

src/App.js

// Add this to the top of the file
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
import { Security, ImplicitCallback } from '@okta/okta-react';

// Replace your `export default` at the bottom of the file with the following:
export default () => (
  
    
      <Security
        issuer={`${process.env.REACT_APP_OKTA_ORG_URL}/oauth2/default`}
        client_id={process.env.REACT_APP_OKTA_CLIENT_ID}
        redirect_uri={`${window.location.origin}/implicit/callback`}
      >
        
          
          
        
      
    
  
);

Okta’s React tools make it easy to authenticate users with their system. Okta will do all the heavy lifting and simply give you a JWT you can use to do with as you please.

What are JWTs?

A JWT is a JSON (JavaScript Object Notation) Web Token, which is most commonly used as a response to a successful authentication with a third party provider using OAuth 2.0. There are three parts to a JWT:

  1. A header for the page
  2. An autocomplete search input
  3. A card to display the selected user

The header and payload are JSON strings converted to Base64, which means they can be easily read by anyone. JWT claims will typically have information about the user, such as their name and ID, but nothing sensitive like their password because it’s easy for anyone to decode the packet. It’s still always a good idea to encrypt the JWT using a secure connection such as HTTPS or WSS because even though they tend to have a short lifespan, they could still be used by someone else until a new token is issued if they were intercepted.

In general, JWTs are much safer than simply using a username and password because you can set a short expiration date, and with some extra setup, you could also revoke a JWT if you have reason to believe it’s compromised. This can all be done without the user needing to understand what’s going on, and they won’t need to change their password. This also allows you to use a third-party provider, like Okta, to authenticate the user without needing to worry about the nitty gritty of password management within your app.

Decoding a JWT is simple. A JWT is just a string, and the three parts are joined together using a dot (.), which means you can split it apart by those dots. The claims are in the second part and are Base64 encoded, which can be easily decoded with the browser’s built-in atob JavaScript function. Then just parse it as JSON:

JSON.parse(atob(token.split('.')[1])) 

Use JWTs for React User Management and Authentication

You can incorporate this into your logic using Redux. Create a new slice to handle authentication:

src/redux/auth.js

import { createSlice } from 'redux-starter-kit';

const { actions, reducer } = createSlice({
  initialState: {
    loading: true,
    user: null,
    token: undefined,
  },
  reducers: {
    setAuth(state, { payload }) {
      state.loading = false;
      state.token = payload.token;

      if (payload.token) {
        try {
          state.user = JSON.parse(atob(payload.token.split('.')[1]));
        } catch (error) {
          state.user = null;
        }
      } else {
        state.user = null;
      }
    },
  },
});

export const { setAuth } = actions;

export default reducer;

You’ll then need to hook this slice into the redux store:

src/redux/index.js

import { configureStore } from 'redux-starter-kit';
import users from './users';
import auth from './auth';

export default configureStore({
  reducer: {
    users,
    auth,
  },
});

Next, you’ll need a new component to call the setAuth action creator, which will hook up to Okta’s React library. This doesn’t need to render anything but is just used to listen for updates from Okta and React Router, then call some actions depending on the current state.

src/AuthHandler.js

import * as React from 'react';
import { withRouter } from 'react-router-dom';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { withAuth } from '@okta/okta-react';

import { setAuth } from './auth';
import { updateUsers } from './users';

const AuthHandler = ({
  auth,
  location,
  token,
  authUser,
  setAuth,
  updateUsers,
}) => {
  React.useEffect(() => {
    auth.getIdToken().then((nextToken = null) => {
      if (nextToken !== token) {
        setAuth({ token: nextToken });
      }
    });
  });

  React.useEffect(() => {
    if (location.pathname === '/login') auth.login('/');
    if (location.pathname === '/logout') auth.logout('/');
  }, [auth, location.pathname]);

  React.useEffect(() => {
    updateUsers(authUser);
  }, [authUser, updateUsers]);

  return null;
};

const mapStateToProps = state => ({
  token: state.auth.token,
  authUser: state.auth.user,
});

const mapDispatchToProps = { setAuth, updateUsers };

export default compose(
  withAuth,
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps,
  ),
)(AuthHandler);

If you’re not familiar with compose, it simply allows you to chain Higher-Order Components (HoCs) in a cleaner way. If you use a lot of HoCs (for example with a library like recompose), this could get messy quickly without using the compose function. Without compose, your export would look more like this:

export default withAuth(
  withRouter(
    connect(
      mapStateToProps,
      mapDispatchToProps
    )(AuthHandler)
  )
);



When listening to auth changes from Okta using withAuth, you’ll get an auth prop with some helpful functions. Whenever the token changes, the component will re-render. You can use React’s useEffect hook to check the ID token and update it if it’s changed.

React.useEffect(() => {
  auth.getIdToken().then((nextToken = null) => {
    setAuth({ token: nextToken });
  });
});

This component also connects to React Router with the withRouter HoC. Depending on the path, it will log the user in or out:

React.useEffect(() => {
  if (location.pathname === '/login') auth.login('/');
  if (location.pathname === '/logout') auth.logout('/');
}, [auth, location.pathname]);

For this tutorial, you’ll be showing something different to the user based on whether or not they are an admin. Imagine you have a set of users that anybody can view, but you want to hide things like their email address for anyone but admins. This effect will update the list of users whenever it detects that the currently signed in user has changed.

React.useEffect(() => {
  updateUsers(authUser);
}, [authUser, updateUsers]);

You may have noticed it’s calling updateUsers from the users Redux slice, but that hasn’t been implemented yet. Let’s go ahead and do that now. Faker has a helper function (userCard) that will generate some more information like an address, phone number, and email. In src/redux/users.js, create a new reducer that checks for the Admins group:

updateUsers(state, { payload: authUser }) {
  if (authUser && authUser.groups.includes('Admins')) {
    state.users = users.map(user => ({
      ...faker.helpers.userCard(),
      ...user,
    }));
  } else {
    state.users = users;
  }

  if (state.selected) {
    state.selected = state.users.find(
      user => user.id === state.selected.id,
    );
  }
}

Also make sure to add it to the exports:

export const { selectUser, updateUsers } = actions; 

Your final file should look like this:

src/redux/users.js

import { createSlice } from 'redux-starter-kit';
import faker from 'faker';

const users = [...new Array(1000)].map(() => ({
  id: faker.random.uuid(),
  avatar: faker.image.avatar(),
  username: faker.internet.userName(),
  name: `${faker.name.firstName()} ${faker.name.lastName()}`,
}));

const { actions, reducer } = createSlice({
  initialState: {
    users,
    selected: null,
  },
  reducers: {
    selectUser(state, { payload: user }) {
      state.selected = user || null;
    },
    updateUsers(state, { payload: authUser }) {
      if (authUser && authUser.groups.includes('Admins')) {
        state.users = users.map(user => ({
          ...faker.helpers.userCard(),
          ...user,
        }));
      } else {
        state.users = users;
      }

      if (state.selected) {
        state.selected = state.users.find(
          user => user.id === state.selected.id,
        );
      }
    },
  },
});

export const { selectUser, updateUsers } = actions;

export default reducer;

Now that you have your AuthHandler component ready and hooked up to Redux, you just need to render it somewhere. Add it to App.js just after the Container wrapper.

// somewhere at the top of the file
import AuthHandler from './AuthHandler';

// Just after 


Your final App.js file should now look like the following:

src/App.js

import React from 'react';
import { Provider } from 'react-redux';
import { Container } from 'semantic-ui-react';
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
import { Security, ImplicitCallback } from '@okta/okta-react';

import Header from './Header';
import Search from './Search';
import SelectedUser from './SelectedUser';
import AuthHandler from './AuthHandler';

import store from './redux;

const App = () => (
  
    
    
      
      
    
    
  
);

export default () => (
  
    
      <Security
        issuer={`${process.env.REACT_APP_OKTA_ORG_URL}/oauth2/default`}
        client_id={process.env.REACT_APP_OKTA_CLIENT_ID}
        redirect_uri={`${window.location.origin}/implicit/callback`}
      >
        
          
          
        
      
    
  
);

Now to take advantage of the extra content available for admins, add a few Card.Meta items to the SelectedUser component, just after the Card.Header, so that the existing Card.Content now looks like this:

src/SelectedUser.js


  {selected.username}
  {selected.email && {selected.email}}
  {selected.phone && {selected.phone}}
  {selected.address && {selected.address.city}}


The last missing piece is to add some controls so that the user can log in and out without URL hacking. Add some code to your Header to display the currently logged in user.

src/Header.js

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Container, Menu, Image, Loader, Dropdown } from 'semantic-ui-react';

import logo from './logo.svg';

const Header = ({ pageName, user, userLoading }) => (
  
    
      
        
        User Search
      
      {pageName}

      {userLoading || !user ? (
        
          {userLoading ? (
            
          ) : (
            Sign In
          )}
        
      ) : (
        <Dropdown
          item
          simple
          text={[user.name, user.groups.includes('Admins') || '(Admin)']
            .filter(Boolean)
            .join(' ')}
        >
          
            
              Sign out
            
          
        
      )}
    
  
);

const mapStateToProps = state => ({
  pageName: state.users.selected ? state.users.selected.name : '',
  user: state.auth.user,
  userLoading: state.auth.loading,
});

export default connect(mapStateToProps)(Header);

When the app first loads, the user state starts out as null and Okta needs to do some work in the background to get you a token. In the meantime, you display a spinner with ``````. If you’re logged out, you get a link to sign in. If you’re already logged in, it displays your name with a dropdown option to log back out. To help you out, if you’re logged in as an Admin it’ll tell you right in the header.

Bonus Tip

When working with Okta’s React library, you don’t actually need to manually decode the JWT - Okta will do it for you. Instead, you can use auth.getUser(). You would be able to cut out a good chunk of code in the reducer by using that instead:

// src/AuthHandler.js

React.useEffect(() => {
  auth.getIdToken().then((nextToken = null) => {
    if (nextToken !== token) {
      auth.getUser().then(user => {
        setAuth({ token: nextToken, user });
      });
    }
  });
});

// src/redux/auth.js
setAuth(state, { payload }) {
  state.loading = false;
  state.token = payload.token;
  state.user = payload.user;
},

Note: The token is left there for a couple of reasons. The main reason is so that you can access the token in other parts of the app in order to send off for an API request. Your backend can decode the same token to ensure that you’re authenticated. Another reason is that it’s less computational effort to compare the previous and next tokens since they’re just strings.

Recommended Reading

How to Using WebSockets in React

Made an app, lets you find all your reddit saves (100% open source)

How to Making Animations In React Native

14 Beneficial Tips to Write Cleaner Code in React Apps

What is a Virtual DOM and why does React use it?

Top 5 animations libraries you can use in React Native

Design Patterns with React Easy State

#reactjs #redux #javascript

What is GEEK

Buddha Community

Secure Your React and Redux App with JWT Authentication
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

How To Set Up Two-Factor Authentication in cPanel

What is 2FA
Two-Factor Authentication (or 2FA as it often referred to) is an extra layer of security that is used to provide users an additional level of protection when securing access to an account.
Employing a 2FA mechanism is a vast improvement in security over the Singe-Factor Authentication method of simply employing a username and password. Using this method, accounts that have 2FA enabled, require the user to enter a one-time passcode that is generated by an external application. The 2FA passcode (usually a six-digit number) is required to be input into the passcode field before access is granted. The 2FA input is usually required directly after the username and password are entered by the client.

#tutorials #2fa #access #account security #authentication #authentication method #authentication token #cli #command line #cpanel #feature manager #google authenticator #one time password #otp #otp authentication #passcode #password #passwords #qr code #security #security code #security policy #security practices #single factor authentication #time-based one-time password #totp #two factor authentication #whm

Top 10 React Native App Development Companies in USA

React Native is the most popular dynamic framework that provides the opportunity for Android & iOS users to download and use your product. Finding a good React Native development company is incredibly challenging. Use our list as your go-to resource for React Native app development Companies in USA.

List of Top-Rated React Native Mobile App Development Companies in USA:

  1. AppClues Infotech
  2. WebClues Infotech
  3. AppClues Studio
  4. WebClues Global
  5. Data EximIT
  6. Apptunix
  7. BHW Group
  8. Willow Tree:
  9. MindGrub
  10. Prismetric

A Brief about the company details mentioned below:

1. AppClues Infotech
As a React Native Mobile App Development Company in USA, AppClues Infotech offers user-centered mobile app development for iOS & Android. Since their founding in 2014, their React Native developers create beautiful mobile apps.

They have a robust react native app development team that has high knowledge and excellent strength of developing any type of mobile app. They have successfully delivered 450+ mobile apps as per client requirements and functionalities.
Website: https://www.appcluesinfotech.com/

2. WebClues Infotech
WebClues Infotech is the Top-Notch React Native mobile app development company in USA & offering exceptional service worldwide. Since their founding in 2014, they have completed 950+ web & mobile apps projects on time.

They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, WebClues Infotech provides top-notch React Native App solutions that meet the needs of their clients.
Website: https://www.webcluesinfotech.com/

3. AppClues Studio
AppClues Studio is one of the top React Native mobile app development company in USA and offers the best service worldwide at an affordable price. They have a robust & comprehensive team of React Native App developers who has high strength & extensive knowledge of developing any type of mobile apps.
Website: https://www.appcluesstudio.com/

4. WebClues Global
WebClues Global is one of the best React Native Mobile App Development Company in USA. They provide low-cost & fast React Native Development Services and their React Native App Developers have a high capability of serving projects on more than one platform.

Since their founding in 2014, they have successfully delivered 721+ mobile app projects accurately. They offer versatile React Native App development technology solutions to their clients at an affordable price.
Website: https://www.webcluesglobal.com/

5. Data EximIT
Hire expert React Native app developer from top React Native app development company in USA. Data EximIT is providing high-quality and innovative React Native application development services and support for your next projects. The company has been in the market for more than 8 years and has already gained the trust of 553+ clients and completed 1250+ projects around the globe.

They have a large pool of React Native App developers who can create scalable, full-fledged, and appealing mobile apps to meet the highest industry standards.
Website: https://www.dataeximit.com/

6. Apptunix
Apptunix is the best React Native App Development Company in the USA. It was established in 2013 and vast experience in developing React Native apps. After developing various successful React Native Mobile Apps, the company believes that this technology helps them incorporate advanced features in mobile apps without influencing the user experience.
Website: https://www.apptunix.com/

7. BHW Group
BHW Group is a Top-Notch React Native Mobile App Development Company in the USA. The company has 13+ years of experience in providing qualitative app development services to clients worldwide. They have a compressive pool of React Native App developers who can create scalable, full-fledged, and creative mobile apps to meet the highest industry standards.
Website: https://thebhwgroup.com/

8. Willow Tree:
Willow Tree is the Top-Notch React Native Mobile App Development Company in the USA & offering exceptional React Native service. They have the best team of developers who has an excellent knowledge of developing the most secure, robust & Powerful React Native Mobile Apps. From start-ups to enterprise organizations, Willow Tree has top-notch React Native App solutions that meet the needs of their clients.
Website: https://willowtreeapps.com/

9. MindGrub
MindGrub is a leading React Native Mobile App Development Company in the USA. Along with React Native, the company also works on other emerging technologies like robotics, augmented & virtual reality. The Company has excellent strength and the best developers team for any type of React Native mobile apps. They offer versatile React Native App development technology solutions to their clients.
Website: https://www.mindgrub.com/

10. Prismetric
Prismetric is the premium React Native Mobile App Development Company in the USA. They provide fast React Native Development Services and their React Native App Developers have a high capability of serving projects on various platforms. They focus on developing customized solutions for specific business requirements. Being a popular name in the React Native development market, Prismetric has accumulated a specialty in offering these services.
Website: https://www.prismetric.com/

#top rated react native app development companies in usa #top 10 react native app development companies in usa #top react native app development companies in usa #react native app development technologies #react native app development #hire top react native app developers in usa

Juned Ghanchi

1621573085

React Native App Developers India, React Native App Development Company

Expand your user base by using react-native apps developed by our expert team for various platforms like Android, Android TV, iOS, macOS, tvOS, the Web, Windows, and UWP.

We help businesses to scale up the process and achieve greater performance by providing the best react native app development services. Our skilled and experienced team’s apps have delivered all the expected results for our clients across the world.

To achieve growth for your business, hire react native app developers in India. You can count on us for all the technical services and support.

#react native app development company india #react native app developers india #hire react native developers india #react native app development company #react native app developers #hire react native developers

Carmen  Grimes

Carmen Grimes

1595491178

Best Electric Bikes and Scooters for Rental Business or Campus Facility

The electric scooter revolution has caught on super-fast taking many cities across the globe by storm. eScooters, a renovated version of old-school scooters now turned into electric vehicles are an environmentally friendly solution to current on-demand commute problems. They work on engines, like cars, enabling short traveling distances without hassle. The result is that these groundbreaking electric machines can now provide faster transport for less — cheaper than Uber and faster than Metro.

Since they are durable, fast, easy to operate and maintain, and are more convenient to park compared to four-wheelers, the eScooters trend has and continues to spike interest as a promising growth area. Several companies and universities are increasingly setting up shop to provide eScooter services realizing a would-be profitable business model and a ready customer base that is university students or residents in need of faster and cheap travel going about their business in school, town, and other surrounding areas.

Electric Scooters Trends and Statistics

In many countries including the U.S., Canada, Mexico, U.K., Germany, France, China, Japan, India, Brazil and Mexico and more, a growing number of eScooter users both locals and tourists can now be seen effortlessly passing lines of drivers stuck in the endless and unmoving traffic.

A recent report by McKinsey revealed that the E-Scooter industry will be worth― $200 billion to $300 billion in the United States, $100 billion to $150 billion in Europe, and $30 billion to $50 billion in China in 2030. The e-Scooter revenue model will also spike and is projected to rise by more than 20% amounting to approximately $5 billion.

And, with a necessity to move people away from high carbon prints, traffic and congestion issues brought about by car-centric transport systems in cities, more and more city planners are developing more bike/scooter lanes and adopting zero-emission plans. This is the force behind the booming electric scooter market and the numbers will only go higher and higher.

Companies that have taken advantage of the growing eScooter trend develop an appthat allows them to provide efficient eScooter services. Such an app enables them to be able to locate bike pick-up and drop points through fully integrated google maps.

List of Best Electric Bikes for Rental Business or Campus Facility 2020:

It’s clear that e scooters will increasingly become more common and the e-scooter business model will continue to grab the attention of manufacturers, investors, entrepreneurs. All this should go ahead with a quest to know what are some of the best electric bikes in the market especially for anyone who would want to get started in the electric bikes/scooters rental business.

We have done a comprehensive list of the best electric bikes! Each bike has been reviewed in depth and includes a full list of specs and a photo.

Billy eBike

mobile-best-electric-bikes-scooters https://www.kickstarter.com/projects/enkicycles/billy-were-redefining-joyrides

To start us off is the Billy eBike, a powerful go-anywhere urban electric bike that’s specially designed to offer an exciting ride like no other whether you want to ride to the grocery store, cafe, work or school. The Billy eBike comes in 4 color options – Billy Blue, Polished aluminium, Artic white, and Stealth black.

Price: $2490

Available countries

Available in the USA, Europe, Asia, South Africa and Australia.This item ships from the USA. Buyers are therefore responsible for any taxes and/or customs duties incurred once it arrives in your country.

Features

  • Control – Ride with confidence with our ultra-wide BMX bars and a hyper-responsive twist throttle.
  • Stealth- Ride like a ninja with our Gates carbon drive that’s as smooth as butter and maintenance-free.
  • Drive – Ride further with our high torque fat bike motor, giving a better climbing performance.
  • Accelerate – Ride quicker with our 20-inch lightweight cutout rims for improved acceleration.
  • Customize – Ride your own way with 5 levels of power control. Each level determines power and speed.
  • Flickable – Ride harder with our BMX /MotoX inspired geometry and lightweight aluminum package

Specifications

  • Maximum speed: 20 mph (32 km/h)
  • Range per charge: 41 miles (66 km)
  • Maximum Power: 500W
  • Motor type: Fat Bike Motor: Bafang RM G060.500.DC
  • Load capacity: 300lbs (136kg)
  • Battery type: 13.6Ah Samsung lithium-ion,
  • Battery capacity: On/off-bike charging available
  • Weight: w/o batt. 48.5lbs (22kg), w/ batt. 54lbs (24.5kg)
  • Front Suspension: Fully adjustable air shock, preload/compression damping /lockout
  • Rear Suspension: spring, preload adjustment
  • Built-in GPS

Why Should You Buy This?

  • Riding fun and excitement
  • Better climbing ability and faster acceleration.
  • Ride with confidence
  • Billy folds for convenient storage and transportation.
  • Shorty levers connect to disc brakes ensuring you stop on a dime
  • belt drives are maintenance-free and clean (no oil or lubrication needed)

**Who Should Ride Billy? **

Both new and experienced riders

**Where to Buy? **Local distributors or ships from the USA.

Genze 200 series e-Bike

genze-best-electric-bikes-scooters https://www.genze.com/fleet/

Featuring a sleek and lightweight aluminum frame design, the 200-Series ebike takes your riding experience to greater heights. Available in both black and white this ebike comes with a connected app, which allows you to plan activities, map distances and routes while also allowing connections with fellow riders.

Price: $2099.00

Available countries

The Genze 200 series e-Bike is available at GenZe retail locations across the U.S or online via GenZe.com website. Customers from outside the US can ship the product while incurring the relevant charges.

Features

  • 2 Frame Options
  • 2 Sizes
  • Integrated/Removable Battery
  • Throttle and Pedal Assist Ride Modes
  • Integrated LCD Display
  • Connected App
  • 24 month warranty
  • GPS navigation
  • Bluetooth connectivity

Specifications

  • Maximum speed: 20 mph with throttle
  • Range per charge: 15-18 miles w/ throttle and 30-50 miles w/ pedal assist
  • Charging time: 3.5 hours
  • Motor type: Brushless Rear Hub Motor
  • Gears: Microshift Thumb Shifter
  • Battery type: Removable Samsung 36V, 9.6AH Li-Ion battery pack
  • Battery capacity: 36V and 350 Wh
  • Weight: 46 pounds
  • Derailleur: 8-speed Shimano
  • Brakes: Dual classic
  • Wheels: 26 x 20 inches
  • Frame: 16, and 18 inches
  • Operating Mode: Analog mode 5 levels of Pedal Assist Thrott­le Mode

Norco from eBikestore

norco-best-electric-bikes-scooters https://ebikestore.com/shop/norco-vlt-s2/

The Norco VLT S2 is a front suspension e-Bike with solid components alongside the reliable Bosch Performance Line Power systems that offer precise pedal assistance during any riding situation.

Price: $2,699.00

Available countries

This item is available via the various Norco bikes international distributors.

Features

  • VLT aluminum frame- for stiffness and wheel security.
  • Bosch e-bike system – for their reliability and performance.
  • E-bike components – for added durability.
  • Hydraulic disc brakes – offer riders more stopping power for safety and control at higher speeds.
  • Practical design features – to add convenience and versatility.

Specifications

  • Maximum speed: KMC X9 9spd
  • Motor type: Bosch Active Line
  • Gears: Shimano Altus RD-M2000, SGS, 9 Speed
  • Battery type: Power Pack 400
  • Battery capacity: 396Wh
  • Suspension: SR Suntour suspension fork
  • Frame: Norco VLT, Aluminum, 12x142mm TA Dropouts

Bodo EV

bodo-best-electric-bikes-scootershttp://www.bodoevs.com/bodoev/products_show.asp?product_id=13

Manufactured by Bodo Vehicle Group Limited, the Bodo EV is specially designed for strong power and extraordinary long service to facilitate super amazing rides. The Bodo Vehicle Company is a striking top in electric vehicles brand field in China and across the globe. Their Bodo EV will no doubt provide your riders with high-level riding satisfaction owing to its high-quality design, strength, breaking stability and speed.

Price: $799

Available countries

This item ships from China with buyers bearing the shipping costs and other variables prior to delivery.

Features

  • Reliable
  • Environment friendly
  • Comfortable riding
  • Fashionable
  • Economical
  • Durable – long service life
  • Braking stability
  • LED lighting technology

Specifications

  • Maximum speed: 45km/h
  • Range per charge: 50km per person
  • Charging time: 8 hours
  • Maximum Power: 3000W
  • Motor type: Brushless DC Motor
  • Load capacity: 100kg
  • Battery type: Lead-acid battery
  • Battery capacity: 60V 20AH
  • Weight: w/o battery 47kg

#android app #autorent #entrepreneurship #ios app #minimum viable product (mvp) #mobile app development #news #app like bird #app like bounce #app like lime #autorent #best electric bikes 2020 #best electric bikes for rental business #best electric kick scooters 2020 #best electric kickscooters for rental business #best electric scooters 2020 #best electric scooters for rental business #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime