This is a Next.js based reddit clone, using Google authentication through NextAuth. Webapp talks to NextJS API using Apollo GraphQL, and data is stored in Firestore.
If you want a different database, you can quite easily replace Firebase completely, as it's isolated to a small part of the backend. See Configuration section below
If you instead want to keep Firestore, you can embrace Firebase to get many perks: get realtime updates, eliminate the need for a backend, lower costs and increase performance by using Firebase Auth and making storage calls from frontend by adding Firestore security rules. This would require a larger rewrite.
-
Copy
.env
to.env.local
. We can safely store secrets here without having them commited. -
Set
JWT_SECRET
to a random long string
-
Create a Firebase project.
-
In Firebase, create and download new private key. You can do this from Project Setting -> Service acccounts. From this file, copy over the following attributes to your
.env.local
fileproject_id
->FIREBASE_PROJECT_ID
private_key
->FIREBASE_PRIVATE_KEY
client_email
->FIREBASE_CLIENT_EMAIL
-
Go to Google Cloud console: Credentials for your project
Find the existing OAuth2.0 web client (autogenerated), and click the Download icon. Add them to your
.env.local
fileClient ID
->GOOGLE_CLIENT_ID
Client secret
->GOOGLE_CLIENT_SECRET
Then click the Edit icon, and add:
-
Authorised JavaScript origins:
http://localhost:3000
-
Authorised redirect URIs:
http://localhost:3000/api/auth/callback/google
Replace "http://localhost:3000" with your domain when deploying the app to new domains.
Note: When running the first time, the app will display errors about disabled services or missing indexes. The errors will link you to the related places in Firebase for enabling these services or creating indexes.
When seeing errors like the one above, click the link to enable database or create indexes.
- Click the button above to copy and deploy to Vercel.
- In the guide, populate environment variables from your
.env.local
. - After having set up a Vercel app with a domain, go back to step 3 in the previous section and add new domains to Authorised JavaScript origins and redirect urls.
- In Vercel, set the domain of the app to
NEXTAUTH_URL
env var.
yarn start
This will start app at localhost:3000
The Webapp talks to our API via a GraphQL, using Documents and React hooks autogenerated by codegen and gqlg.
To make API changes:
- Update
./graphql/schema.graphql
- Run
yarn schema:generate
Typescript errors can then be found with yarn tsc -b
, which should notify you of
most code that needs an update.
The logo/title "raidit" can be overriden by setting env var NEXT_PUBLIC_TITLE
.
These are set in lib/config.ts
. Simply update them there.
Everything related to using Firestore as a database is isolated to the following two files.
backend/db/index.ts
and backend/db/firebase.ts
If you want to replace the database, you need only reimplement these methods.
If you want to restrict login to users with @example.com
domain, specify
ALLOWED_SIGNUP_DOMAINS
in .env
. You can use a comma ,
separator to specify
multiple domains.
By default, all domains are granted access.
You can add Auth0, SMS or email login, by adding
NextAuth providers in pages/api/auth/[...nextauth].ts
.