Do I need a server to log in with React?

Question

It may be a silly question but I’m very confused about React.js, I developed a Webapi in Asp.net core and it’s already working... I need to do a login system on React. Thinking about the way I would develop, in the case I program in php, I would use php to consume this web api. But I’m confused about React, do I need to use Node to consume my web api? or only React already does that? Oh of course, remembering that this is for a login system.

And another question, going back to php, I would create a SESSION system for the user to navigate, in which case it would be on the server side, so it makes me q, as this would be done in React?

Here’s an example image of how it works in php

Answer 1

There are some ways to solve this friend, let’s go in pieces.

Requisitions

---

The Reactjs is only a library for building interface, does not offer you, as well as frameworks native request ways, you can use other libraries like Xios, or even use the api fetch present in ES6, or even the old Xmlhttprequest.

Example with Axios:

import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Example with fetch:

import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
     fetch(`https://jsonplaceholder.typicode.com/users`)
         .then((resp) => resp.json())
           .then(function(data) {
             const persons = res.data;
             this.setState({ persons });
          })
      })
  }

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Source

Sessions

Ways to keep the user logged in

---

This will depend more on your architecture, nowadays there is a larger trend for using JWT’s (JSON Web Token), where you store a token generated in your application backend and sends them as header in requests for routes that are protected, (Basically a WEB badge system).

This token can be stored through the API Webstorage, sessionStorage or localStorage. To maintain security it is always important to take a look at how to store these tokens safely by implementing synchronization tokens for example, I advise to take a read on this article https://auth0.com/docs/security/store-tokens and in that https://medium.com/tableless/entendendo-tokens-jwt-json-web-token-413c6d1397f6.

You can vary the implementation type with other libraries , we also have the redux-react-session, in which case it will depend on your environment.

The reactjs is very agnostic of this kind of thing, you can search and test the best strategy that fits what you need.