HackWITus SignIn

This repo serves to be the main sign in page for HackWITus 2018.

Contribution Setup Guide

• To start developing on this repo you will need to do a few things to setup your development enviornment.
• Fork the repo and clone it to your local machine. Create a file in the root directory called .env

Google APIs Setup

• Start by navigating to https://console.developers.google.com/
• Either login with a google account or create one here

• Now in the google developers console either create a project in the top left corner or select an existing one

• Initialize your project if you are creating a new one. Side note creating a new project takes a few seconds.

• Make sure your new project is selected in the top left and click enable apis and services

• Search for the google+ api, this is used for oauth, and click on it

• Click 'Enable'

• This API requires oauth credentials so click 'Create Credentials' to get your ClientID and Client Secret

• Follow through the following images for the propper credential setup

• Now click create

• Now back in the developers console main dashboard, you should see a credentials tab on the left side, if you click it you should see this. Click the download button circled on the image.

• This should download a credentials.json file with your client_id and client_secret in it.
• Add your client_secret and your client_id to the .env file you created earlier as GOOGLECLIENTID, and GOOGLECLIENTSECRET
• Your .env file should look like this now

GOOGLECLIENTID=********************
GOOGLECLIENTSECRET=****************

MLab Setup

• Navigate to https://mlab.com/
• Create an account or login
• Click Create New to create a new MongoDB Database hosted on the AWS Cloud ---FOR FREE---
• Click AWS Hosting - 0.5gb sandbox, and then US-West-Virginia
• Name your database in all lowercase and then click name database, then place order
• Your database should appear under your MongoDB deployments, click on it, then click on the users tab, and add a database user (make sure you do NOT select read only)
• On the top of the page you should see

To connect using a driver via the standard MongoDB URI (what's this?):
   mongodb://<dbuser>:<dbpassword>@ds******.mlab.com:******/uptonm-hackwitus-dev

• Take this connect URI string and complete it by replacing dbuser and dbpassword with your database user's username and password. Place that string in your .env file under the name DBURI. The .env file should look like the following now:

GOOGLECLIENTID=********************
GOOGLECLIENTSECRET=****************
DBURI=*****************************

• Now we need to add 2 more keys to our .env file, these can be anything you want as they just serve to secure your database and the user info stored in it. In a development enviornment they can be short if you want them to be as the production enviorment ones will replace them on deploy.
• Add .env variables for QUERYKEY and COOKIEKEY. Query Key serves to protect the open api as a form of makeshift api key for making requests to the api. Cookie Key serves to protect the oauth client from cookie spoofing as it stores the current user's info in a browser cookie.
• .env should now look something like this. Again QUERYKEY and COOKIEKEY can be any string you want, just remember anytime you want to test a request to the api you will need to add /?key=QUERYKEY to the end of the request url

GOOGLECLIENTID=********************
GOOGLECLIENTSECRET=****************
DBURI=*****************************
COOKIEKEY=skujdnoasudbnaisudbsidubn
QUERYKEY=ksjnddsudnosaudnosidhosidh
PORT=8000

React Side Enviornment Variables

• There is only one React side enviornment variable to add
• Make a file named .env in the client directory, and add the same QUERYKEY you used above to it under the name REACT_APP_QUERYKEY
• The resulting file should look something like this:

REACT_APP_QUERYKEY=ksjnddsudnosaudnosidhosidh

• So your two .env files should look like the following

./HackWITusSignIn/.env

GOOGLECLIENTID=********************
GOOGLECLIENTSECRET=****************
DBURI=*****************************
COOKIEKEY=skujdnoasudbnaisudbsidubn
QUERYKEY=ksjnddsudnosaudnosidhosidh
PORT=8000

./HackWITusSignIn/client/.env

REACT_APP_QUERYKEY=ksjnddsudnosaudnosidhosidh

Starting Up the Development Server

• To start up the development server follow these steps
• Setup enviornment variables in cloned repo (See above steps for this)
• npm install in root directory
• npm run dev to start the backend server
• In another terminal window cd client && npm install
• npm start to start the front-end react development server
• You should be good to go at this point, if you have any questions feel free to reach out to me or open an issue!
• Happy Hacking!