author	category	tags	status	twitter
Edson Ayllon	functionality	react react native node express mongodb rest api authentication email user accounts restricted sections	complete	https://twitter.com/relativeread

Modular 2-2019

MERN Authentication

Modular authentication application made to isolate bugs with authentication, and have one working authentication system to compare other apps implementing this protocol. It now serves as a boiler plate for applications which utilize authentication.

Contents

• 1 | Description
• 2 | Roadmap
  • 2.1 Minimal Viable Product (MVP)
  • 2.2 Add Passport
  • 2.3 Add password reset through email
  • 2.4 Add email verification
  • 2.5 Add user page when logged in, where users can change their settings
  • 2.6 Add Alternative Logins (social)
  • 2.7 Other features
• 3 | Getting Started
  • 3.1 Installing
  • 3.2 Running
    • 3.2.1 Running the Backend
    • 3.2.2 Running the Frontend

1 | Description

Authentication system uses MongoDB, Node.js, Express.js, React, and React-Native (MERN).

2 | Roadmap

2.1 Minimal Viable Product (MVP)

Status: Complete

Backend

• Add MongoDB
  • Create User Schema
  • Ability to save User objects to the database
  • Hash user passwords before saving credentials to the database
• Add JsonWebTokens (JWT)
  • Create and deliver token to the Client based on credentials
  • Read token, compare to credentials on database
• Create protected API routes
  • Create middleware the checks JWT

Frontend

• Create a form that saves values to state
• Send user credentials to server with POST method
• Save JWT from Server
  • JWT saved to Local Storage on React and React-native
  • Local storage accessed, sent to server to verify authorization
  • Working access to protected routes on Client and Server
• Create a protected route
  • Create a route that holds protected content
  • Create middleware that redirects when server returns unauthorized

Currently, the app can create a new user with an email and password, redirect that user to the login page, then login to redirect to the restricted section. Passwords are salted and hashed before being saved to the database. The server will return an error on the given situations, which will be shown to the user on the client:

• Mismatching passwords
• Creating an account that has already been created
• Attempting to submit with an empty password field
• Attempting to submit with an empty email field
• Incorrect password for a given email on login

2.2 Add Passport

Status: Complete

• Logout system
• Passport.js integration
  • Login System
    • Create a JWT upon login request if successful
    • Allow access to restricted sections upon login
    • Send error messages for login
  • Account Registration System
    • Create a user with Passport
    • Confirm matching passwords -- handled by client
    • Respond if user already exists

2.3 Add password reset through email

Status: Complete

• Fully functioning password reset using email with Mongodb
  • Create a forgot password form in the frontend
  • Add ability to email users who sign up
  • Email users who submit the forgot password form
  • Create a reset password token, add it to the Email
  • Have email push to a URL on the frontend containing the token
  • Read the token in the URL, save as a variable in the Client
  • Send the password reset token from the Client to the Server
  • Check to see if password reset token expired in the Server using Mongodb
  • If token expired, send expiration notice to the client, have client display message
  • If token is not expired, and matching password provided in form, reset the password
• Other Updates
  • Changed hashing function for passwords from bcrypt to Argon2 https://password-hashing.net/
  • Updated frontend promises to Async functions
  • Made user services and mailing services to hold functions externally

2.4 Add email verification

Status: Complete

• Fully functioning email verification with MongoDB
  • Don't allow user login without account verification
    • Have verification field in User schema under local, default as unverified
    • Do not create JsonWebToken for user if account is not verified
    • If not verified, tell user to verify their account through client
  • Make a process for user to verify their account
    • Added token verification function for email verification
    • Added token creation for email verification
    • Send verification token in email to account
    • Read verification token in the frontend opened from email
    • Send verification token to the server
    • Validate verification token, if valid, activate account, allow login
    • If account not verified in time, account will be deleted, preventing unauthorized users creating accounts for email addresses they do not own, also, cleaning the database
  • If account is verified, allow login, and access to restricted content

2.5 Add user page when logged in, where users can change their settings

Status: In Progress

• Bugfixes from previous versions
• Create User Settings page
  • Allow people to logout in that page
  • Form updates nested state
  • Allow users to change their passwords in that page given they type the right old password
  • Allow users to create and change their username in that page

2.6 Add Alternative Logins (social)

Status: Not started

• Add 0Auth for social logins
  • Change User Schema for local and social logins
• Create user roles
  • Create restricted sections based on user role (No account, Free account, Premium account)
  • Add roles to user schema
  • Create system to test roles
• Verify accounts with Email verification
• Add user page that can update email and username, password in mongodb

2.7 Other features

Status: Not started

• Add rate limiting (login, registration, api, to slow brute force attacks on passwords)
• Deactivate account with too many failed login attempts

3 | Getting Started

3.1 Installing

1. Install dependencies in both cd ./frontend and cd ./backend

npm install || yarn

Authentication requires MongoDB to be installed on your system. MongoDB can be installed with HomeBrew on Mac

2. In ./backend create a new file variables.env.

Add a secret key to variables.env. The secret key can be whatever you would like. This step is optional for this app if not running for production.

AUTH_SECRET_KEY = "Secret Key"

And add your mongodb uri with your credentials in variables.env: This step is optional for this app if not running for production.

MONGO_URI = "Mongo uri with credentials"

And add credentials for a mailing client you will use to send your emails. Integrated services include Zoho, Gmail, and Outlook. This app uses nodemailer to send emails. This step is required for activating new user accounts and reseting passwords through this app.

Inside ./backend/variables.env.

MAIL_USER = "your email"
MAIL_PASS = "your email password"
APP_NAME = "your app name or company name"

3.2 Running

You can run as a web app, mobile app, or desktop app.

3.2.1 Running the Backend

You must run the backend first. The backend requires MongoD to be running first.

Inside ./backend:

1. Begin MongoD.

mongod

2. Then run the server

npm run dev || yarn dev || npm run start || yarn start

Running the script dev will use nodemon which restarts the server upon changes in code.

The back-end will be running in localhost:4000 with current settings.

You can see your mongodb

3.2.2 Running the Frontend

The front-end will run in localhost:3000 with current settings.

Inside ./frontend:

For Web:

npm run web || yarn web

For Mobile:

npm run start || yarn start || exp start

For Desktop:

npm run desktop || yarn desktop