mikelpmc / react-xstate-api-auth

Basic demo to show the usage of React and Xstate with authentication flow

React xstate auth demo

Basic demo to show the usage of React and Xstate with authentication flow

You can visualize the auth machine here: https://xstate.js.org/viz/?gist=94e9a29e1ab016e06b8b354b9d558cf2

Project Structure:

    -server
        -src
            -data
                -schemas
            -logic
            -routes
            -utils
        -index.js
        -.env

    -client
        -src
            -components
            -machine
            -provider
            -service
            -utils
            -index.js
        -.env

System Requirements:

• Node
• Mongodb

Server:

1. Install the project dependencies

$ npm i

2. Create the .env file on the root of the server/ folder

$ touch .env

.env

DB_URL=mongodb://localhost:27017/your-database
PORT=5000
TOKEN_SECRET=your-secret
TOKEN_EXP=3h

3. Start the API

$ npm start

Client:

1. Download dependencies

$ npm i

2. Create the .env file on the root of the client/ folder

$ touch .env

.env

REACT_APP_API_BASE_URL=http://localhost:5000/api

*Note: In order to enviroment variables work with this react project without touching any config file they all have to start with REACT_APP

3. Start the app

$ npm start

Author: http://github.com/mikelpmc