Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/frankiefab100/react-form-authentication-validation
Complete React Sign In & Sign Up Form with Validation and User Authentication
https://github.com/frankiefab100/react-form-authentication-validation
authentication firebase-auth form forms formvalidation
Last synced: about 1 month ago
JSON representation
Complete React Sign In & Sign Up Form with Validation and User Authentication
- Host: GitHub
- URL: https://github.com/frankiefab100/react-form-authentication-validation
- Owner: frankiefab100
- Created: 2021-01-08T11:20:37.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-19T20:03:20.000Z (over 2 years ago)
- Last Synced: 2024-11-07T15:54:27.734Z (3 months ago)
- Topics: authentication, firebase-auth, form, forms, formvalidation
- Language: JavaScript
- Homepage: https://form-auth-val.netlify.app/
- Size: 291 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Form-Authentication-Validation
A form web app which allows a user to sign up and/or sign in using an email or using popular Federated Identity Providers (Google and Facebook).
Firebase handles the hosting and Identity Access Management (IAM).
Table of Contents
-
Project Overview
-
Features Highlights
-
Why I started this project
- Folder Structure
-
Getting Started
- Contributing
- License
- Sponsor
- Author
## **Project Overview** ✨
The goal is to build a user-friendly form making it easier for a user to log in either with a username/password or with their social accounts (such as Facebook or Twitter.
[PREVIEW VIDEO/GIF]
Preview Link:
### **Technologies Used** 🛠
- React (UI Framework)
- React-Router (Routing Library)
- Firebase (Database & Hosting)
### **Resources** 🎨
- Google font:
- React-icons:
## **Features Highlights** ⚡
- [x] Email/Password registration (Sign Up) and login (Sign In)
- [x] Form input validation using Regular expression pattern
- [x] Google and Facebook Provider for user authentication
- [x] React Router for easily navigation
- [x] Role based authorization using Protected routes
### Optimization 🚀
I would like to implement the following features to improve this project
- [] Password Show/Hide Toggle
- [] Password Reset
- [] Retrieve user's profile after the login
## Why I started this project 😇
- Fully developed websites require a form to give complete access to customers or users.
- Some forms use `uncontrolled elements` to handle form data which is old fashioned and bad practice.
- I wanted to experiment with Firebase Identity Providers and Database.
### **What I Learnt** 📖
This personal project took a lot of research. I was able to understand
- React `useContext`, how to optimize and manage state in React using `ContextAPI`.
- Confirmation of password between 6 to 14 characters which must contain atleast least one lowercase letter, one uppercase letter, one numeric digit, and one special character.
- Authentication and authorization through either Google or Facebook and email adddress.
## **Folder Structure** 📁
```bash
├── public
│ ├── index.html
├── src
│ ├── authentication
│ │ ├── firebase
│ │ │
│ ├── components
│ │ ├── Alert.jsx
│ │ ├── SignIn.jsx
│ │ ├── SignUp.jsx
| | |
│ ├── context
│ │ ├── AuthContext.js
| | |
│ ├── protectedroute
│ │ ├── ForgotPassword.jsx
│ │ ├── ProtectedRoute.jsx
│ │ ├── UserProfile.jsx
| | |
│ ├── validation
│ │ ├── FormValidation.js
| | |
│ ├── App.js
│ ├── index.css
│ ├── index.js
├── .gitignore
├── package-lock.json
└── package.json
```
## **Getting Started** 💻
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
### **Prerequisites**
Make sure you have [Node.js](https://nodejs.org/) and [NPM](https://www.npmjs.com/) installed.
- Node.js (>= 17.4.0)
- NPM (>= 8.4.0)
### **Setup** 👨💻
> Usage: How to run this web app locally
1. Install dependencies
```npm install```
2. Run the development server
```npm run dev```
3. Navigate to `http://localhost:3000` in your browser to view the web app.
## **Contributing** 🤝🏾
Did you find bug(s) or want to request new feture(s)? Please visit the [Contributors guidelines](/CONTRIBUTING.md) to learn how to submit an issue or pull request.
## **License** 🔐
This project is built under the [MIT License](./MIT-License).
## **Sponsor** ❤
If you like this project, kindly star ⭐ and/or consider buying me coffee(s). Every donation is appreciated.
## **Author** ✍
Franklin Ohaegbulam - [@frankiefab100](https://twitter.com/frankiefab100)