Next.js 13.2.1, NextAuth.js, Hasura, GraphQL, Tailwind, Google Cloud.
- Create new Nhost project
- Hasura > Copy secret. Update
HASURA_GRAPHQL_ADMIN_SECRET
- Settings > Environment Variables
- Update
NEXT_PUBLIC_HASURA_GRAPHQL_API=https://
with NHOST_GRAPHQL_URL - Update
NEXT_PUBLIC_HASURA_WS_GRAPHQL_API=wss://
with NHOST_GRAPHQL_URL - Update
HASURA_GRAPHQL_JWT_SECRET
with NHOST_JWT_SECRET - The default unauthorized role is
public
for Nhost
- Add
HASURA_GRAPHQL_UNAUTHORIZED_ROLE
env var in Hasura, set it topublic
- Add
HASURA_GRAPHQL_JWT_SECRET
env var in Hasura, set it to{ "type": "HS256", "key": "***SECRET***" }
- Update
NEXTAUTH_SECRET=***JWT SECRET***
- Create a Railway or Neon Postgres Database
- Run the queries from
src/lib/hasura/nextauth.sql
to set up auth tables - Run the queries from
(placeholder)
to set up the other tables
- Update
GCS_PROJECT_ID=
- Create a new Service Account with the name
XXXX-cloud
- Go to service account permissions and grant access
- Add service account email as New Principals
- Assign
Owner
role. - Go to service account keys and add a new JSON key and open downloaded file
- Update
GCS_CLIENT_EMAIL=
with "client_email". - Update
GCS_PRIVATE_KEY="----...----/n"
with "private_key".
- User type: External
- App domain:
127.0.0.1:PORT
, Authorized Domains:XXXX.vercel.app
- Add scopes: .../auth/userinfo.email, .../auth/userinfo.profile
- Application type: Web application, name:
XXXX Web Client
- Authorized redirect URIs:
http://127.0.0.1:PORT/api/auth/callback/google
,https://XXXX.vercel.app/api/auth/callback/google
- Copy your Client ID and Client Secret
- Update
GOOGLE_CLIENT_ID=
andGOOGLE_CLIENT_SECRET=
- Name:
XXXX-storage
- Set a default class: Standard
- Prevent public access > Uncheck "Enforce public access prevention on this bucket"
- Access control: Uniform
- Go to bucket > Permissions > Grant Access
- New principals:
allUsers
- Role: Storage Object Viewer
- Allow public access
- Update
GCS_BUCKET_NAME=
- Download Google Cloud CLI. https://cloud.google.com/sdk/docs/install
- Run
cd C:/PROJECT_PATH
wheregcs_cors.json
is located - Run
gsutil cors set gcs_cors.json gs://XXXX-storage
- /!\ Change the CORS settings for more security
- Add
GOOGLE_API_KEY=
env var - Create new API Key
- Website restrictions:
127.0.0.1:PORT/*
,XXXX.vercel.app/*
- Restrict key:
Maps Javascript API
,Places API
, ...
- Rename
graphql-codegen.example.ts
tographql-codegen.ts
- Update the file
npm install
npm run graphql-codegen
npm run dev