https://github.com/yevhenbk/jwt-authentication

https://github.com/yevhenbk/jwt-authentication

Last synced: 10 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/yevhenbk/jwt-authentication
• Owner: Yevhenbk
• Created: 2022-01-22T16:58:43.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-07-24T22:35:26.000Z (over 2 years ago)
• Last Synced: 2024-02-21T03:05:24.252Z (9 months ago)
• Language: JavaScript
• Size: 8.82 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JWT Authentication With Flask & React.js

Almost every website in the world has user authentication, in this project user authentication is implemented using the Python Flask framework for building a backend REST API and React.js and sessionStorage API for the front end web application.

![This is an image](https://github.com/Yevhenbk/jwt-authentication/blob/main/src/front/img/photo_5976375146627316210_w.jpg)

### Styles

You can update the `styles/index.scss` or create new `.scss` files inside `styles/` and import them into your current scss or js files depending on your needs.

### Components

Add more files into your `./src/js/components` or styles folder as you need them and import them into your current files as needed.

💡Note: There is an example using the Context API inside `views/demo.js`;

### Views (Components)

Add more files into your `./src/js/views` and import them in `./src/js/layout.jsx`.

### Context

This boilerplate comes with a centralized general Context API. The file `./src/js/store/flux.js` has a base structure for the store, we encourage you to change it and adapt it to your needs.

React Context [docs](https://reactjs.org/docs/context.html)

BreathCode Lesson [view](https://content.breatheco.de/lesson/react-hooks-explained)

The `Provider` is already set. You can consume from any component using the useContext hook to get the `store` and `actions` from the Context. Check `/views/demo.js` to see a demo.

```jsx

import { Context } from "../store/appContext";

const MyComponentSuper = () => {

  //here you use useContext to get store and actions

  const { store, actions } = useContext(Context);

  return 
{/* you can use your actions or store inside the html */}

}

```


### Back-End Manual Installation:

It is recomended to install the backend first, make sure you have Python 3.8, Pipenv and a database engine (Posgress recomended)

1. Install the python packages: `$ pipenv install`

2. Create a .env file based on the .env.example: `$ cp .env.example .env`

3. Install your database engine and create your database, depending on your database you have to create a DATABASE_URL variable with one of the possible values, make sure yo replace the valudes with your database information:

| Engine	| DATABASE_URL 						|

| ------------- | ----------------------------------------------------- |

| SQLite	| sqlite:////test.db	 				|

| MySQL		| mysql://username:password@localhost:port/example	|

| Postgress	| postgres://username:password@localhost:5432/example 	|

4. Migrate the migrations: `$ pipenv run migrate` (skip if you have not made changes to the models on the `./src/api/models.py`)

5. Run the migrations: `$ pipenv run upgrade`

6. Run the application: `$ pipenv run start`

### Front-End Manual Installation:

- Make sure you are using node version 14+ and that you have already successfully installed and runned the backend.

1. Install the packages: `$ npm install`

2. Start coding! start the webpack dev server `$ npm run start`

## Publish your website!

This boilerplate it's 100% integrated with Herkou, just by pushing your changes to the heroku repository it will deploy: `$ git push heroku main`

		// "prettier-webpack-plugin": "^1.2.0",

"dotenv-webpack": "^1.7.0",

		"friendly-errors-webpack-plugin": "^1.7.0",