The Secrets App is a website that allows you to share a personal secret anonymously alongside others on the secrets board. Starting with account creation, new users can enter details manually or login using the Google OAuth2 method. From there, The data is sent to a secure MongoDB Atlas database. Here, user accounts are stored alongside any other potential profile information, as well as the secrets created by this user.
Being centered around web security and authentication methods, over the course of the development process I learned and implemented 6 different types of security layers. Though it is quite simple, it taught me invaluable lessons on why and how to include security in my future projects - starting with basic user registration, and ending with Google OAuth2 connections. Below is a breakdown of each of the successive security techniques.
have a look at the live project
Allow users to create an account name and password stored in a local database
Require basic encryption on all password data stored in the database
Apply Hashing to the encrypted passwords stored in the database
Include 10 rounds of salting/hashing on the encrypted passwords
Add Cookies and Sessions to the browser using Passport.JS
Connect a Google OAuth2 login button to the signup/login page.
- any HTML code editor of your choice, such as VS Code, Atom, etc.
- install Node.js
- install and setup MongoDB (installation guide)
- clone the repository to your desired location.
- Install the required packages in the terminal
$ npm install
- Head over to Google's Developer Console
- Create a new project name "Secrets".
- Navigate to the Credentials tab, enter your email, then click save.
- click "Create Credentials", then select OAuth Client ID
- Select "Web Application" and enter the name "Secrets".
- Under Authorized Javascript Origins, enter
http://localhost:3000 - Under Authorized Redirect URLS, enter
http://localhost:3000/auth/google/secrets - Click submit, then save the provided client ID and client secret
- Inside the root project directory, create a new file called
.env - open this file with any code editor and add the following text.
CLIENT_ID=(your client ID)CLIENT_SECRET=(your client secret) - save the file
To run the website as is, start the app from your terminal with,
$node app.js
In you browser's address bar, navigate to
http://http://localhost:3000/
Enabling Database Controls
To enable the MongoDB controls on your local machine, you will need to install and configure MongoDB on you local machine before running the application. Once you have done that, go ahead and run the application normally.
Once you have the node server running successfully, the app.js file will have created a new database on your local machine. Check to see that this MongoDB server is running properly.
-
In a separate command terminal, open the mongo shell.
$ mongosh -
show the current list of active databases
$ show dbs -
Here you can control the stored users in "UserDB", or delete the database entirely using standard MongoDB commands. Check out the documentation for more info!
Once you've successfully got the web-app up and running, you can either manually register a new account on the homepage, or login using your google account with Google OAuth. For manual logins, the data is sent and stored on your local Mongo Database.
After logging in, you are taken to the "secrets" page. This page displays secret messages created by all users. Each user is allowed only one secret at a time (so make sure its a good one!)
Contains the main app.js file, as well as .env variables for the google API
Folder containing CSS style sheet linked to the HTML document
Contains all pages and components used in the website
Jake Brunner - jbbrunner10@gmail.com
LinkedIn - https://www.linkedin.com/in/jake-brunner-21760522b/
This Repository - https://github.com/jandrew13/Web-Dev-Bootcamp