OnePass is an app that helps you generate and manage passwords securely.
⭐ This project's goals were:
- Learn how to salt/ hash passwords.
- Learn how to generate cryptographically secure random passwords with "crypto.getRandomValues()" from the "Web Crypto API" instead of "Math.random()".
- Learn how to store passwords securely.
- Learn how to implement secure Login and Register.
- Experiment with JWT and use the token generated to persist data.
- Develop my skills in React (React Router, React Cookie, etc).
- Learn how to persist data with React even after refreshing the page.
- A non-logged-in user can generate passwords.
- To store their passwords and login info (email), the user needs to register or login.
- After logging in, they can save their login info for a specific website: the password they generated + email used, and give them a title.
Generate random passwords
: The user can choose how they want their password to be → length (needs to be at least 1 or it will throw an error), lowercase, uppercase, numbers or symbols.Default
: If they don't specify any options, the default is a random password with all 4 options.Manage and store passwords
: A user can login or register to save their generated passwords.Secure Login and Register
: The passwords are hashed before getting stored in the database.Save login info (password and email)
: When a user saves a password, they can give it a title, Facebook for example, and they can also save the email they used to login on Facebook.Delete saved login info
: A user can delete a saved password and email.
- Create the
.env
by using.env.example
as a reference:cp .env.example .env
- Update the
.env
file with your correct local information (username, password, database, port), your secret info for Cookie-Session, plus your secret token for JWT. - Install dependencies:
npm i
in bothfront-end
andback-end
folders. - Reset database:
npm run db:reset
cd back-end
thennpm start
to run the Server, andcd front-end
to run the App.
OnePass.-.Overview.mp4
OnePass.-.Error.handling.mp4
-
Database
- PostgreSQL
-
Back-end:
- express
- Node JS
- bcryptjs
- dotenv
- jsonwebtoken
- cookie-session
- method-override
- morgan
- pg
- nodemon
-
Front-end
- React
- React-Router
- React-Cookie
- React-Bootstrap
- SASS
- bcryptjs
- axios
The ERD is in the back-end folder.