https://github.com/mikelpmc/react-xstate-api-auth

Basic demo to show the usage of React and Xstate with authentication flow
https://github.com/mikelpmc/react-xstate-api-auth

auth context-api finite-state-machine javascript react statechart xstate

Last synced: 18 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mikelpmc/react-xstate-api-auth
• Owner: mikelpmc
• Created: 2020-04-01T15:59:00.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T00:36:26.000Z (about 2 years ago)
• Last Synced: 2025-01-19T05:46:01.872Z (26 days ago)
• Topics: auth, context-api, finite-state-machine, javascript, react, statechart, xstate
• Language: JavaScript
• Size: 4.66 MB
• Stars: 30
• Watchers: 3
• Forks: 5
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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:

```sh

    -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

```sh

$ npm i

```

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

```sh

$ touch .env

```

.env

```sh

DB_URL=mongodb://localhost:27017/your-database

PORT=5000

TOKEN_SECRET=your-secret

TOKEN_EXP=3h

```

3. Start the API

```sh

$ npm start

```

Client:

1. Download dependencies

```sh

$ npm i

```

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

```sh

$ touch .env

```

.env

```sh

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

```sh

$ npm start

```

Author: [http://github.com/mikelpmc](http://github.com/mikelpmc)