Do I need to have a server to make a login system with the react?

2

It may be a silly question but I'm pretty confused about React.js, I developed a Webapi in Asp.net core and it's already working ... I need to make a login system in React. Thinking about how 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 the node to consume my web api? or just the react already does it? Oh sure, remembering this is for a login system.

And another question, returning in php, I would create a SESSION system for the user to navigate, and in case that would stay on the server side, then make me q, how would this be done in React?

Here is an example image of how it works in php

    
asked by anonymous 05.10.2018 / 16:17

1 answer

1

There are a few ways to fix this, let's go by parts.

Requisitions

ReactJS is just a library for interface building, does not offer you, as well as frameworks native request ways, you can use other libraries like axios , or even use the api fetch present in ES6, or even the old XMLHttpRequest .

Example with axes:

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>
    )
  }
}

Font

Sessions

Ways to keep the user logged in

This will depend more on your architecture nowadays to a greater tendency to use JSTs (JSON Web Token), where you store generated tokens in your backend application and send them as a header in requests for routes that are protected, (basically a WEB badge system).

The storage of this token can be done through the WebStorage API, using sessionStorage or localStorage . It is always good to maintain security and also take a look at how to store these token securely by implementing synchronization tokens for example, I advise you to read this article link and in this link .

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

The reactjs are very agnostic of this type of thing, you can go "hunting" the best strategy that best fit to what you need.

    
05.10.2018 / 16:57