Henry Short

Henry Short

1586355060

Build a Secure React Application with JWTs and Redux

This is a guide on creating a React Redux application from scratch. The focus is on handling a user signing up and logging in — and then authenticating and authorizing them with JSON Web Tokens(JWT). Keep in mind the file structures and approach presented here represent one of many.

For this guide, we’ll be making requests to a Ruby on Rails API that was already created. For reference, it’s referring to the Rails API produced here and the repo.

Setup

Let’s generate a React application with Create React App. In the terminal, run:

npx create-react-app jwt-react-redux

Change the directory to jwt-react-redux, and open it. From the directory, run the following to install Redux, React Redux, and Redux Thunk.

npm install redux react-redux redux-thunk

In terms of packages, we’ve installed everything we need to integrate Redux into the React application.

Thinking ahead for when the React application expands and more data is necessary, it’d be best to organize our actions and reducers into two separate folders. Under src, let’s create two folders, one called action and one called reducers. We may also want to consider creating a components folder for the multiple components the application may have. For now, we’ll leave these folders alone and focus on integrating Redux.

Integrating Redux

Navigate to src/index.js. At the top of the file, we want to add:

import {Provider} from 'react-redux'

Provider is going to allow us to provide the Redux Store (which will contain the state) to all of the components that make up our application, meaning that the Store doesn’t have to be manually passed around. Instead, individual components that want to access the Store can just access it.

We treat Provider as a component, and inside of the Provider tags, we provide the rest of the application, which, in this case, is the App component. A single prop needs to be passed into Provider — the Store to share with the rest of the application.

We now need to create the Store using a method from redux. At the top, let’s add:

import {createStore} from 'redux'

createStore is a function to be called once at the beginning of the application to create the Redux Store. It takes in one argument, a function that’ll return an object. This function is what’s known as a reducer.

Reducers

We can have multiple reducer functions, each responsible for a piece of information in the state. In this guide, we want to have information on a logged-in user and an extra example, a list of comments (which will just be an empty array). It’d be best to create a reducer functions for each type of information.

Under src/reducers, let’s create two files: userReducer.js and commentReducer.js. Let’s begin with userReducer.js. We want to define a variable, userReducer, and set it to a function.

const defaultState = {
    loggedIn: false,
    user: {}
}

const userReducer = (state = defaultState, action) => {
    switch(action.type){
        case "SET_USER":
            return {
                loggedIn: true,
                user: {...action.payload}
            }
        case "LOG_OUT":
            localStorage.clear()
            return {
                loggedIn: false,
                user: {}
            }
        default: return state
    }
}

export default userReducer

userReducer.js
src/reducers/userReducer.js

This function will have a default state as the first argument and will take an action object, as the second argument. In the code block, the action object will have a property: type. Based on that type, certain changes will occur in the state. It’s common to utilize a switch statement to handle the different conditions.

This reducer has to be used in another file, so we have to export it. Since we only want to export the one function, we use export default.

Now let’s navigate to commentReducer.js. This function is serving as an example, so no information will be included. Similarly, let’s create a variable, commentReducer, and set it to a function. The default state will be an empty array as the first argument and an action object as the second. We’ll also export this function by default.

const commentReducer = (state = [], action) => {
    switch(action.type){
        default: return state
    }
}

export default commentReducer

src/reducers/commentReducer.js

Now that we have two reducers set up, we can include them both in our Redux Store. However, createStore can only take in one reducer. To avoid this dilemma, we use another function from Redux that allows us to combine multiple reducers.

Create another file under src/reducers, and name it index.js . In this file, we import combineReducers from Redux and the reducers.

import userReducer from './userReducer'
import commentReducer from './commentReducer'
import {combineReducers} from 'redux'

const rootReducer = combineReducers({
    userReducer,
    commentReducer
})

export default rootReducer

src/reducers/index.js

combineReducers takes in one argument, an object that provides key-value pairs. The key would represent the root state name, and the value will be the reducer that manages it. When we export default the rootReducer, this will represent the object we pass into createStore.

Let’s navigate back to src/index.js, import the rootReducer, import applyMiddleware from Redux, and import Thunk from redux-thunk. In simplest terms, applyMiddleware and Thunk will be used to handle asynchronous fetch in a dispatch. rootReducer will be the first argument to createStore and applyMiddleware(thunk) will be the second.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {Provider} from 'react-redux'
import rootReducer from './reducers/index'

const store = createStore(rootReducer, applyMiddleware(thunk))

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  ,
  document.getElementById('root')
);

index.js

We have now created the Redux Store. The next step is to generate the actions that’ll update the reducers.

Actions

Since the commentsReducer serves as an example, its state won’t change. We’ll focus on creating actions for the userReducer . Under src/actions , let’s create a file named userActions.js. In this file, we’ll create what’s known as action creators, functions that return an action object. They’ll contain a type property, which the reducer we’ll use to make the appropriate changes in the state. For more information, refer to the docs.

We also have methods that handle asynchronous requests. Inside of those methods, we make fetch calls and from the data that’s sent back, we call a dispatch with the appropriate action object and the data that came back (if necessary) as arguments.

// Action Creators

const setUser = (payload) => ({ type: "SET_USER", payload})

export const logUserOut = () => ({type: "LOG_OUT"})

// Methods

export const fetchUser = (userInfo) => dispatch => {
    fetch(`http://localhost:4000/login`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify(userInfo)
    })
    .then(res => res.json())
    .then(data => {
        // data sent back will in the format of
        // {
        //     user: {},
        //.    token: "aaaaa.bbbbb.bbbbb"
        // }
        localStorage.setItem("token", data.token)
        dispatch(setUser(data.user))
    })
}

export const signUserUp = (userInfo) => dispatch => {
    fetch(`http://localhost:4000/users`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json"
        },
        body: JSON.stringify(userInfo)
    })
    .then(res => res.json())
    .then(data => {
        // data sent back will in the format of
        // {
        //     user: {},
        //.    token: "aaaaa.bbbbb.bbbbb"
        // }
        localStorage.setItem("token", data.token)
        dispatch(setUser(data.user))
    })
}

export const autoLogin = () => dispatch => {
    fetch(`http://localhost:4000/auto_login`, {
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
            "Authorization": `Bearer ${localStorage.getItem("token")}`
        }
    })
    .then(res => res.json())
    .then(data => {
        // data sent back will in the format of
        // {
        //     user: {},
        //.    token: "aaaaa.bbbbb.bbbbb"
        // }
        localStorage.setItem("token", data.token)
        dispatch(setUser(data.user))
    })
}

src/actions/userActions/js

fetchUser,signUserUp, and autoLogin are examples handling fetch requests to the server. As a reminder, the server for this guide is a Rails API generated from another guide and is currently running on http://localhost:4000.

Note: When the request is successful, the server will return an object with the properties of user and token. The token represents the JWT generated from the server, and this will be stored in the browser through localStorage.setItem("token", data.token) . When another request is made to the server requiring authentication/authorization, the token can be pulled through localStorage.getItem("token").

Reminder: The action creator is a function that returns an object. Simply calling it won’t change our state. A function from Redux, dispatch, has to be called with an object as an argument to communicate with the Store. The dispatch can either be called from the component or from the action file.

The method structure of fetchUser ,signUserUp, and autoLogin is possible due to applyMiddleware(thunk) that was integrated when creating the Store. It hasn’t been shown yet, but these two methods will be called from the components inside of a dispatch. However, as mentioned, dispatch can only take in an object. With applyMiddleware(thunk), we’re able to pass in a function definition.

For more on the applyMiddleware function, refer to Thunk’s GitHub page.

Since we have multiple functions, we want to use export for each function except setUser. This function is only going to be used within the context of fetchUser,signUserUp, and autoLogin, which are in the same file. Now we have our Store, reducers, and actions all set up. The next focus is on how to connect the React components to the Store.

Connecting Components to the Store with ‘connect’

For this guide, we’ll focus only on three components: the App generated, the LoginComponent, and SignUpComponent, which we’ll create. Let’s make some adjustments to the App component and set up the connection to the store.

import React from 'react';
import './App.css';
import {connect} from 'react-redux'
import LoginComponent from './components/LoginComponentt'
import SignUpComponent from './components/SignUpComponent'
import {autoLogin} from './actions/userActions'

class App extends React.Component{

  componentDidMount(){
    this.props.autoLogin()
  }

  render(){
    return (
      <div className="App">
            {
              !this.props.userReducer.loggedIn ? <h1>Sign Up or Login!</h1> : <h1>Welcome, {this.props.userReducer.user.username}</h1>
            }
           <SignUpComponent/>
           <LoginComponent/>
           <button>Logout</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    userReducer: state.userReducer
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    autoLogin: () => dispatch(autoLogin())
  }
}

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

src/App.js

We’ll create the LoginComponent and SignUpComponent under src/components momentarily, but for now, we can import them. But another key resource we’ll import is a named export, connect, from the React Redux library.

Exploring ‘connect() ‘

Let’s take a few minutes to observe how connect() works. Invoking connect() actually returns a function. We want to invoke that returned function, passing in the component we want to connect the Store to — in this case, it’ll be the App. Once that’s established, the App component is connected to the Store.

In connect(), the first argument that’s passed in is a function, typically called, mapStateToProps. mapStateToProps takes in an argument, which represents the state. This function needs to return an object with the information needed from the state. In this case, we only need the userReducer information. To access that object, we refer to this.props.userReducer.

connect() also takes in a second argument, typically called mapDispatchToProps. Similar to mapStateToProps, it takes in an argument, which represents dispatch. The goal is to return an object defining various props, and these props are going to call dispatch. The props are typically defined with arrow functions. Inside of these dispatch calls, we can call functions we defined in our actions, such as fetchUser and signUserUp — but these must first be imported.

Note: Not all components will need information from the Store or send a dispatch to the Store. If we only need information, we just pass in mapStateToProps in connect(mapStateToProps). Otherwise, if we only need the component to send a dispatch, we leave the first argument null and pass in mapDispatchToProps as the second in connect(null, mapDispatchToProps).

User Login/Sign Up

Now that we’re able to access the Store with connect(), let’s begin getting user information from the server and storing it in our state. The LoginComponent and SignUpComponent are going to be very similar except one will have an extra field, and they’ll be sending a dispatch to two different methods. Let’s start with LoginComponent.

Login

In our Ruby on Rails API, when a user is logging in, we need to pass in the username and password. We’ll implement a form in this component, and we want to make it controlled. We’ll include a local component state to keep track of the inputs. For this component, we only need to import the fetchUser action as well as connect from React Redux.

import React from 'react'
import {connect} from 'react-redux'
import {fetchUser} from '../actions/userActions'

class LoginComponent extends React.Component {
    state = {
        username: "",
        password: ""
    }

    handleOnChange = (e) => {
        e.persist();
        this.setState(() => ({
            [e.target.name]: e.target.value 
        }))
    }

    onSubmit = (e) => {
        e.preventDefault()
        this.props.fetchUser(this.state)
    }

    render(){
        return(
            <div>
                <h1>Login Form</h1>
                <form onSubmit={this.onSubmit}>
                    <input 
                        type="text" 
                        name="username" 
                        placeholder="Username" 
                        value={this.state.username}
                        onChange={this.handleOnChange}
                    />
                    <br/>
                    <input
                        type="password"
                        name="password"
                        placeholder="Password"
                        value={this.state.password}
                        onChange={this.handleOnChange}
                    />
                    <br/>
                    <input
                        type="submit"
                        value="Login"
                    />
                </form>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        fetchUser: (userInfo) => dispatch(fetchUser(userInfo))
    }
}

export default connect(null, mapDispatchToProps)(LoginComponent)

src/components/LoginComponent.js

This component will only need to send a dispatch to the Store. It doesn’t need information from it. So we set connect with (null, mapDispatchToProps). When the form is submitted, a dispatch is sent to the fetchUser method. fetchUser will take the credentials stored in the local state as an argument.

As a reminder, within the fetchUser function, we’re making a fetch request to the server to log the user in. If there’s a match with the credentials, an object will return containing the properties of the user and a token (a JWT). The token will be stored through localStorage and will represent our way of being authenticated/authorized.

Another dispatch is called within the function taking in the object returned from the setUser action creator. That object is sent to the Store and communicates with the reducers transforming the user information of state.

Sign op

In our Ruby on Rails API, when a user is signing up, we need to pass in the username, password, and age. The SignUpComponent is identical to the LoginComponent with an input field for age. Also, we import the named export, signUserUp, from actions.

import React from 'react'
import {connect} from 'react-redux'
import {signUserUp} from '../actions/userActions'

class SignUpComponent extends React.Component {
    state = {
        username: "",
        password: "",
        age: ""
    }

    handleOnChange = (e) => {
        e.persist();
        this.setState(() => ({
            [e.target.name]: e.target.value 
        }))
    }

    onSubmit = (e) => {
        e.preventDefault()
        this.props.signUserUp(this.state)
    }

    render(){
        return(
            <div>
                <h1>SignUp Form</h1>
                <form onSubmit={this.onSubmit}>
                    <input 
                        type="text" 
                        name="username" 
                        placeholder="Username" 
                        value={this.state.username}
                        onChange={this.handleOnChange}
                    />
                    <br/>
                    <input
                        type="password"
                        name="password"
                        placeholder="Password"
                        value={this.state.password}
                        onChange={this.handleOnChange}
                    />
                    <br/>
                    <input
                        type="number"
                        name="age"
                        placeholder="Age"
                        value={this.state.age}
                        onChange={this.handleOnChange}
                    />

                    <br/>
                    <input
                        type="submit"
                        value="Login"
                    />
                </form>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        signUserUp: (userInfo) => dispatch(signUserUp(userInfo))
    }
}

export default connect(null, mapDispatchToProps)(SignUpComponent)

src/components/SignUpComponent.js

Similar to LoginComponent, this component is only concerned with dispatch. However, when the form is submitted, a dispatch is sent to the signUserUp method instead but also takes in the credentials stored in local state as an argument. The same exact process occurs inside of the signUserUp function — with storing JWT into localStorage and a dispatch being sent to the reducers containing the action type and user information.

Autologin

Back in the App component, we included the lifecycle method componentDidMount. The idea is when the app loads, we want to automatically authenticate/authorize a user that was already logged in. To make this happen, we utilize the JWT stored in localStorage and send that to the server providing us with the associated user.

First, we import the named export, autoLogin from actions. We set up the mapDispatchToProps in connect and name the prop, autoLogin. Inside of componentDidMount, we want to invoke that prop. We don’t need to pass in any arguments.

Inside the autoLogin function in actions, we’re making a GET fetch request to the server. In the headers, we pass in an authorization key set to Bearer <token>. The space between bearer and token is important since our server is expecting it in that format.

The server receives the request and authenticates/authorizes the user based on the JWT. Once the response is sent back, a similar process of storing JWT into localStorage and a dispatch being sent to the reducers containing the action type and user information takes place.

Log out the user

The functionality of logOut won’t be implemented in the app, but the action for it was created in actions. Depending on which component we’d like to like to have that functionality, we’d import the named export, logUserOut, from actions. A dispatch can then be sent to the Store taking in logUserOut as an argument since it is object. In the userReducer, the user object will be cleared of the properties as well as localStorage.clear() being invoked thereby removing the JWT.

Bonus: React Redux Hooks Alternative

React Redux offers a set of Hooks as an alternative to the existing connect()function. These Hooks allow you to connect to the Redux Store and dispatch actions without having to wrap your components in connect().

We’ll reformat our existing App class component into a functional component. Since this will now be a functional component, we don’t have access tot he lifecycle method.

We have to import a named export from React, useEffect, as well as useSelector and useDispatch from React Redux instead of connect.

import React, {useEffect} from 'react'
import './App.css';
import {useSelector, useDispatch} from 'react-redux'
import LoginComponent from './components/LoginComponentt'
import SignUpComponent from './components/SignUpComponent'
import {autoLogin} from './actions/userActions'

const App = () => {
  const userReducer = useSelector(state => state.userReducer)
  const dispatch = useDispatch()
  
  useEffect(() => {
    dispatch(autoLogin())
  }, [])
  
  return (
    <div className="App">
        {
          !userReducer.loggedIn ? <h1>Sign Up or Login!</h1> : <h1>Welcome, {userReducer.user.username}</h1>
        }
        <SignUpComponent/>
        <LoginComponent/>

    </div>
  )
}

export default App

src/App.js (Hooks alternative)

Instead of componentDidMount, we’ll implement the useEffect function. It takes in two arguments, a function and an empty array. The function runs every time the component renders. The array contains a list of dependencies. If the value of one of the dependencies changes, useEffect will execute again. We leave it as an empty array to avoid a possible infinite loop of renders.

For more information on React Hooks please refer to this article.

useSelector is the equivalent of mapStateToProps. useSelector takes in a function, where the state is the argument and we’re implicitly returning a specific value in state. useDispatch is the equivalent of mapDispatchToProps. Invoking it returns a dispatch, which will take in the autoLogin .

For more information on React Redux Hooks, please see this article.

Closing Remarks

And there you have it! We’ve created a React Redux application that manages JWT for user authentication/authorization. This covered a very basic setup that didn’t account for edge cases such as what if no user was returned from the request? If you’re up for, expand on the basic building blocks, including the log-out feature and addressing the edge cases. Thank you for reading!

Refer to my repository for details:

GitHub repo

#reactjs #redux

What is GEEK

Buddha Community

Build a Secure React Application with JWTs and Redux
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

Reduce Redux Boilerplate Code with Redux-Actions

Redux has become one of the most popular libraries in front-end development since it was introduced by Dan Abramov and Andrew Clark in 2015. They designed it as the successor for Flux, with the support of some developer tools and a few more concepts embedded in it.

Flux is a fancy name for observer pattern further modified to support React. Both Flux and Redux consist of similar concepts like Store, Actions (events in the application). In other words, Flux is a simple JavaScript object but with some middleware like redux-thunk. It can be a function or a promise for Redux. However, Redux is a single source of truth with concepts like immutability, which improve performance. It is one of the main reasons for Redux to dominate in State Management.

Image for post

Flux vs Redux comparison source: enappd.com

Despite its advantages, some developers have found it rather challenging to deal with Redux due to the amount of boilerplate code introduced with it. And the complexity of the code seems to be another reason for the difficulty.

In this article, we will look at how to reduce the boilerplate code brought about by Actions and Reducers using Redux-Actions

#react-redux-boilerplate #react-redux #react #react-actions #redux

Wilford  Pagac

Wilford Pagac

1596789120

Best Custom Web & Mobile App Development Company

Everything around us has become smart, like smart infrastructures, smart cities, autonomous vehicles, to name a few. The innovation of smart devices makes it possible to achieve these heights in science and technology. But, data is vulnerable, there is a risk of attack by cybercriminals. To get started, let’s know about IoT devices.

What are IoT devices?

The Internet Of Things(IoT) is a system that interrelates computer devices like sensors, software, and actuators, digital machines, etc. They are linked together with particular objects that work through the internet and transfer data over devices without humans interference.

Famous examples are Amazon Alexa, Apple SIRI, Interconnected baby monitors, video doorbells, and smart thermostats.

How could your IoT devices be vulnerable?

When technologies grow and evolve, risks are also on the high stakes. Ransomware attacks are on the continuous increase; securing data has become the top priority.

When you think your smart home won’t fudge a thing against cybercriminals, you should also know that they are vulnerable. When cybercriminals access our smart voice speakers like Amazon Alexa or Apple Siri, it becomes easy for them to steal your data.

Cybersecurity report 2020 says popular hacking forums expose 770 million email addresses and 21 million unique passwords, 620 million accounts have been compromised from 16 hacked websites.

The attacks are likely to increase every year. To help you secure your data of IoT devices, here are some best tips you can implement.

Tips to secure your IoT devices

1. Change Default Router Name

Your router has the default name of make and model. When we stick with the manufacturer name, attackers can quickly identify our make and model. So give the router name different from your addresses, without giving away personal information.

2. Know your connected network and connected devices

If your devices are connected to the internet, these connections are vulnerable to cyber attacks when your devices don’t have the proper security. Almost every web interface is equipped with multiple devices, so it’s hard to track the device. But, it’s crucial to stay aware of them.

3. Change default usernames and passwords

When we use the default usernames and passwords, it is attackable. Because the cybercriminals possibly know the default passwords come with IoT devices. So use strong passwords to access our IoT devices.

4. Manage strong, Unique passwords for your IoT devices and accounts

Use strong or unique passwords that are easily assumed, such as ‘123456’ or ‘password1234’ to protect your accounts. Give strong and complex passwords formed by combinations of alphabets, numeric, and not easily bypassed symbols.

Also, change passwords for multiple accounts and change them regularly to avoid attacks. We can also set several attempts to wrong passwords to set locking the account to safeguard from the hackers.

5. Do not use Public WI-FI Networks

Are you try to keep an eye on your IoT devices through your mobile devices in different locations. I recommend you not to use the public WI-FI network to access them. Because they are easily accessible through for everyone, you are still in a hurry to access, use VPN that gives them protection against cyber-attacks, giving them privacy and security features, for example, using Express VPN.

6. Establish firewalls to discover the vulnerabilities

There are software and firewalls like intrusion detection system/intrusion prevention system in the market. This will be useful to screen and analyze the wire traffic of a network. You can identify the security weakness by the firewall scanners within the network structure. Use these firewalls to get rid of unwanted security issues and vulnerabilities.

7. Reconfigure your device settings

Every smart device comes with the insecure default settings, and sometimes we are not able to change these default settings configurations. These conditions need to be assessed and need to reconfigure the default settings.

8. Authenticate the IoT applications

Nowadays, every smart app offers authentication to secure the accounts. There are many types of authentication methods like single-factor authentication, two-step authentication, and multi-factor authentication. Use any one of these to send a one time password (OTP) to verify the user who logs in the smart device to keep our accounts from falling into the wrong hands.

9. Update the device software up to date

Every smart device manufacturer releases updates to fix bugs in their software. These security patches help us to improve our protection of the device. Also, update the software on the smartphone, which we are used to monitoring the IoT devices to avoid vulnerabilities.

10. Track the smartphones and keep them safe

When we connect the smart home to the smartphone and control them via smartphone, you need to keep them safe. If you miss the phone almost, every personal information is at risk to the cybercriminals. But sometimes it happens by accident, makes sure that you can clear all the data remotely.

However, securing smart devices is essential in the world of data. There are still cybercriminals bypassing the securities. So make sure to do the safety measures to avoid our accounts falling out into the wrong hands. I hope these steps will help you all to secure your IoT devices.

If you have any, feel free to share them in the comments! I’d love to know them.

Are you looking for more? Subscribe to weekly newsletters that can help your stay updated IoT application developments.

#iot #enterprise iot security #how iot can be used to enhance security #how to improve iot security #how to protect iot devices from hackers #how to secure iot devices #iot security #iot security devices #iot security offerings #iot security technologies iot security plus #iot vulnerable devices #risk based iot security program

Aubrey  Price

Aubrey Price

1590485641

Accessing Redux from Components In React & React Native

How to set up a basic version of Redux in your React or React Native application. To make things clearer, I based my setup on my event application, where users create events that other users attend. We generated the action creators, reducers, and Redux store, and wrapped the application in a provider. Today I’ll finish the loop and talk about how to access the Redux store in your application using both class and functional components. The provider we added to the root component provides the store to all the components in your application. Therefore, we will just look at how to access the store from an individual component.

#react-redux #redux #hooks #react #react-native

Karine  Crooks

Karine Crooks

1589960215

A Basic Redux Setup in React/React Native

Redux is a powerful state management tool that can be very useful as your React or React Native application grows and requires you to keep track of more state. How you want to set up Redux is up to you, but if you’re a beginner, it may be easiest to learn the flow of Redux with a step-by-step walkthrough. Here I’ve outlined a basic way to set up Redux to go along with this post and it will be the same for React and React Native.

#react #react-native #redux #react-redux