Next.js OAuth/Firebase Starter Kit

AboutDeveloperUI?

Step 5: Deploy to Vercel

HomePrevious StepAbout

Sub-step 1: Set up Vercel account and install CLI

Follow these steps to get ready for deployment:

  1. Create a Vercel account if you don't have one.
  2. Install the Vercel CLI by running npm install -g vercel.

Sub-step 2: Deploy to Vercel

Time to deploy your app to Vercel:

  1. Run vercel in your project directory.
  2. If you run into any errors you may need to add environment variables to Vercel using the vercel dashboard.
  3. Go to your project in vercel and launch the app from the live domain. It should look something like this: your-app-name.vercel.app

Sub-step 3: Update Google Cloud Console settings

Update Google Cloud Console settings to allow redirects from the Vercel deployment:

  1. Try and Login on your deployed app
  2. You'll see Request details: redirect_uri=https://yourapp.vercel.app/api/auth/callback/google Copy the uri and paste it in google cloud console
  3. Go to APIs & Services > Credentials.
  4. Click on OAuth 2.0 Client IDs for your application.
  5. Add the Vercel deployment URI to authorized redirect URIs.
  6. You'll also need to add this URI to the Javascript origins: redirect_uri=https://yourapp.vercel.app/api/auth/callback/google

Sub-step 4: Test the deployment

Go back to your application, try logging in, and verify that it's working properly on the live Vercel link.

Note: If you decide to use a custom domain in the future, you'll need to repeat these steps.