Flask[Part 1]: Register-login Authorization System
Tags: python, beginners, flask, webdev
Published: 2021-08-26 11:34:54

##Introduction
Hello reader, thank you for opening this article, which documents an authorization system made with flask. Lets get straight to the agenda,In your development journey, holding the stack constant,you will realize authorization system is an important section of your software. Therefore in this article we will build an authorization system. Lets get starting 

##Objective
1. To allow new users create account and data saved in the Database. If the email or username already exists in the database, the user will not create the account.
2. To allow Users can log in only if their credentials are present in the database.
3. To prevent users from accessing other pages without logging in 
4. To recover password through email 
5. To allow users log out and redirect to page.


##Section

As the project is quite large, I will subdivide it into section to ease the learning. In the first session, I will handle the following: 
1. Setup Project folder and Project Environment 
2. Flask installation and testing it
3. Setting up routes

## Section 1:

### Prerequisite
   - Some 2 months experience in Programming
   - Python 3+ installed
   - Linux bash / Windows CMD
   - Optional, Linux Ubuntu 20.04 LTS

1. Setup Project folder and Project Environment 
Open up you Linux bash ,create a project folder and an Project Environment with in it.

navigate to you Desktop directory and create a working directory, Additionally we will create a folder within to store project files.
Name of the project:MileStone
```console
tito@titoOwnerPc:cd ~ && cd Desktop
tito@titoOwnerPc:~/Desktop$ mkdir MileStone
tito@titoOwnerPc:~/Desktop$cd MileStone
tito@titoOwnerPc:~/Desktop/MileStone$ mkdir Mile_Proj
tito@titoOwnerPc:~/Desktop/MileStone$  
```
Let create an environment ,name it Mile_env :
```shell
tito@titoOwnerPc:~/Desktop/MileStone$ python3 -m venv Mile_env
```
fire up VsCode from the terminal while on the working directory
```shell
tito@titoOwnerPc:~/Desktop/MileStone$ code .
```
Now, while in your VsCode terminal, activate the environment and  and navigate to the project folder(Mile_Proj) in the VsCode terminal
```shell
tito@titoOwnerPc:~/Desktop/MileStone$ cd Mile_env && cd bin && source activate
(Mile_env)tito@titoOwnerPc:~/Desktop/MileStone/Mile_env/bin$ cd .. && cd .. && cd Mile_Proj
(Mile_env)tito@titoOwnerPc:~/Desktop/MileStone/Mile_Proj$
```
Install flask with this command:
```shell
(Mile_env)tito@titoOwnerPc:~/Desktop/MileStone/Mile_Proj$ pip3 install flask

```
Create an 'app.py' file
```shell
(Mile_env)tito@titoOwnerPc:~/Desktop/MileStone/Mile_Proj$ touch apps.py

```
Congratulations for getting to this level.Your VsCode should look like this
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ms0j98wswbcewu7me1gg.png)

Now , lets get working by creating the backbone of our flask app and run it
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmlsgbpnfalcj9pjqepk.png)

To run the flask app: 
```shell
(Mile_env)tito@titoOwnerPc:~/Desktop/MileStone/Mile_Proj$ export FLASK_APP=apps.py
```
then:
```shell
(Mile_env)tito@titoOwnerPc:~/Desktop/MileStone/Mile_Proj$ flask run
```
After running, you should see this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tdppgc0bkdrishskkcv9.png)

Open your browser and open this link:
(Do not click the link)
[http://127.0.0.1:5000/home](http://127.0.0.1:5000/home) 
Optionally, hold Ctrl + click the link provided in the terminal after running the app

I will end section 1 of this project by adding routes to the project. For the base , application will have:
   - login route
   - logout route  
   - home route 
   - Register route

Lets do this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fc7f29tkxflxd39pgfp4.png)
Try running and make sure the routes are running well without errors.
I wish to end the first section here. In the next post, which I will focus on setting up database. 
-------------------------[NEXT ARTICLE](https://dev.to/titusnjuguna/flask-part-2-setting-up-database-3f3e)---------------------------