https://github.com/dkcodec/authorization-and-authentification

React, Redux/redux-toolkit, Firebase
https://github.com/dkcodec/authorization-and-authentification

Last synced: 5 months ago
JSON representation

React, Redux/redux-toolkit, Firebase

• Host: GitHub
• URL: https://github.com/dkcodec/authorization-and-authentification
• Owner: dkcodec
• Created: 2023-12-12T10:08:34.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-10T15:40:46.000Z (over 2 years ago)
• Last Synced: 2025-07-03T15:56:16.124Z (12 months ago)
• Language: JavaScript
• Homepage:
• Size: 977 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Authentification (React.js + Firebase)

This project was chosen because I think authorization is a great way to learn React.js, as well as learning how to connect and work with a database.

## What did I do?

### Outline:

- Website home page

- Website login page

- Website register page

- Firebase setting

- Connecting DB with my project

### Home page

This is the page that appears after logging into your account or after registration (the so-called home page).

If you are logged in under the user (for example) ddd@mail.ru, you will see such a page with an option to log out of the account and then redirect to the login page.

![Home Page](./Project_photos/Home_page.png)

And this is how the page will look like if you just registered under a new user (for example) myproject@gamil.com.

![Home Page](./Project_photos/Home_page_After_Registration.png)

### Login Page

This page is required to be filled out, as it takes the user to the home page. If there is no such user, he/she will not be able to access the main page.

It's how this page looks like:

![Login_Page](./Project_photos/Login_page.png)

Example with Non-existent user:

![Login_Page](./Project_photos/Login_page_Non_existent_user.png)

User not be able to access the main page.

Another example with exist user:

![Login_Page](./Project_photos/Login_page_filled.png)

### Register page

This page is responsible for the registration of new users, after a person fills out all the fields and clicks "register" he will get to the main page.

It's how this page looks like:

![Regiser_page](./Project_photos/Register_page.png)

And example with filled forms:

![Regiser_page_filled](./Project_photos/Register_page_filled.png)

### NEW SKILLS:

I now have a better understanding of how React, Redux, Js, Firebase, JSX, Hooks work.

- Working with JSX components

- Creacting my own hook

- Application architecture

- Work with documentation

### References / links:

- [React Docs Eng.](https://react.dev/)

- [React Docs Rus.](https://reactdev.ru/)

- [Firebase Docs Eng.](https://firebase.google.com/docs)

- [Mozilla Docs Eng/Rus](https://developer.mozilla.org/en-US/docs/Web)

## Thank you for your attention

##### P.S: Maybe in the near future I will rewrite this code on TS, and also add styles.