Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

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

api context-api express hooks jwt node provider react react-hooks react-router reducer

Last synced: 1 day ago
JSON representation

React context api auth demo

Host: GitHub
URL: https://github.com/mikelpmc/react-context-api-auth
Owner: mikelpmc
Created: 2018-09-18T12:33:38.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-01-06T11:47:22.000Z (about 2 years ago)
Last Synced: 2025-01-19T05:46:01.462Z (10 days ago)
Topics: api, context-api, express, hooks, jwt, node, provider, react, react-hooks, react-router, reducer
Language: JavaScript
Homepage:
Size: 2.11 MB
Stars: 37
Watchers: 3
Forks: 9
Open Issues: 13
Metadata Files:
- Readme: README.md

# React Context API Demo

Basic demo to show the usage of the React context API with authentication flow

Project Structure:

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

-client
-public
-src
-components
-pages
-providers
-services
-utils
-App.js
-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 Server

```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 client

```sh
$ npm start
```

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