This is a monolithic boilerplate repo for kickstarting fullstack applications for fellow coder(wo)manz. The boilerplate code sets up a authentication API using google login OAuth2 with users saved to a Mongo database. It exposes an Apollo graphQL server for querying and mutating data. This repo also sets up a simple front-end which includes persisent login with google, protected routes, and login / logout auth token management.
- Node server with Express to simplify server and serve static frontend build files
- REST endpoint for authentication
/auth/googleLogin
, this listens for requests from frontend with googletokenId
, and uses Google's OAuth2Clientgoogle-auth-library
to verify the token, create a user in the mongo database, sign ajsonwebtoken
using the users ID, and respond with thatjsonwebtoken
and basic google profile data to the frontend. - Express middleware to verify all
/graphql
API requests have validAuthorization: Bearer [token]
- GraphQL using Apollo server on
/graphql
endpoint for exposing data - Mongo database set up with
User
model
create-react-app
boilerplate codereact-router-dom
set up with/login
,/profile
, and/
PrivateRoute
wrapper which requires user to be logged in to access route, otherwise redirectes to/login
react-google-login
components for Login / Logout functionality via Google OAuth2auth.js
service to build auth context using React hooks, handle local storage control of auth token, get authentication status, and basic user details
Key | Value |
---|---|
PORT | 5000 |
MONGO_CONNECT_DEV | mongodb://127.0.0.1:27017/fullstack_boilerplate (where fullstack_boilerplate is the name of the database your want to use for development) |
GOOGLE_CLIENT_ID | client ID from console.cloud.google.com |
JWT_SECRET | any string that is complex and not easy to guess / brute force |
Make sure to run npm install
. You may also need to run npm install -g nodemon
in order to get the hot reloading dev server to work.
- Navigate to console.cloud.google.com
- Create new project
- In navigation menu, go to APIs & Services -> Credentials
- Create credentials -> OAuth client ID
- Follow steps and copy google client ID into both the .env & component
To start the server in dev mode run: npm run server-dev
To start the client in dev mode, open a new terminal window, change directory into /client and run: npm start
- Make sure mongodb is installed on your computer
- You may need to run
mongod
in a terminal window to start the local database
You can also run npm run dev
to start the server, the client, and the database all in the same terminal window.
Navigate to http://localhost:5000/graphql
to play around with your API and make test queries.
*Note 5000
should be replaced with the port you set in the .env file. Also, because the API is protected by authentication middleware, you won't be able to access the graphql playground unless your requests contain a valid valid Authorization: Bearer [token]
. To get a valid token, you can log the token returned from the /auth/googleLogin
API call on the frontend. I recommend using the Mod Header chrome extension to attach the bearer token to the playground.