This is a monolithic, containerized, boilerplate repo for kickstarting fullstack applications. The boilerplate code sets up an 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 persistent login with google, protected routes, themes and modular scss style-sheets, and login / logout auth token management.
The client, server, and database are then containerized using the docker-compose.yml
file. Once you've installed docker, you can spin up the the development environment with two simple commands.
docker-compose build
docker-compose up
- (when you've finished)
docker-compose down
- 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. - Graph QL context 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/
pagesPrivateRoute
wrapper which requires user to be logged in to access route, otherwise redirects to/login
react-google-login
components for Login / Logout functionality via Google OAuth2auth.js
hook to build auth context using React hooks, handle local storage control of auth token, get authentication status, and basic user detailscache.js
creates an Apollo client InMemoryCache. Reactive variables can be defined here.provideTheme.js
hook to hold app theme state and save to localStorageprovideAppState.js
hook which combines useReducer and react context to provide a mini redux-style app store. This may be useful for setting app level state such as which modal is open, etc..base.module.scss
provides base styles with_.className
naming.themeProperties.module.scss
defines themed custom css properties to use throughout the app. If you want to support multiple themes, make sure to add each --propertyName key to both :root{} and [data-theme="themeName"]{} blocks
*Note, you may also need to copy the .env file to the /server
directory when deploying the containers.
Key | Value |
---|---|
PORT | 5000 |
DB_USER | username |
DB_PASSWORD | password |
GOOGLE_OAUTH_CLIENT_ID | OAUTH client ID from console.cloud.google.com |
JWT_SECRET | any string that is complex and not easy to guess / brute force |
MONGO_CONNECTION_URL | connection string for live mongoDB (not required for local development) |
- Navigate to here, download and install docker desktop
- 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
- Navigate to the root project directory (where docker-compose.yml is located)
- Once docker-desktop is installed, run
docker-compose build
. This will build the the following images for your app- lightweight mongo database server (port 27017 by default)
- lightweight node server for API and graphql (port 5000 by default)
- lightweight node server for serving create-react-app client build (port 3000 by default)
- To start, run
docker-compose up
- To stop, run
docker-compose down
Once containers are running, 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. You can also view the client localStorage
session key and copy the token from there. Once you have the token, paste it into the HTTP header section of the graphql playground.