Setting up the Google Provider in T3 Stack

The T3 stack is a web development stack made up of Next.js, TypeScript and Tailwind CSS, created by Theo Browne. You can optionally add tRPC, Prisma or NextAuth as well to the stack. In this post, I will walk through how to implement the Google Provider with NextAuth in the T3 stack, to provide easy authentication.

Step 1: Create a T3 Stack app

The first step in implementing the Google provider in the T3 stack is to have a T3 stack app, documentation can be found here.

Open a terminal and run one of the commands below.

For this example, I will be using the npm command and using the below settings.

1. Name the project.

2. Choose TypeScript.

3. Add all optional packages.

4. Initialize git repository by pressing Y.

5. Run npm install by pressing Y.

6. Press Enter.

Successfully Created Our Project!

Step 2: Create a Google Cloud Platform Project

Before you can use the Google Provider in T3 stack, you need to create a Google Cloud Platform project.

1. To create a new project, go to the Google Cloud Console.

2. Click on the "Create Project" button.

3. Give your project a name and click on the "Create" button.

4. Select the project you just created.

Step 3: Creating our Google Client ID and Client Secret

1. Open the drawer and go to API & Services.

2. Then select OAuth consent screen tab, select External and press Create.

3. Complete the app registration, add the required information and keep everything else in the default settings.

4. After completing the app registration, go to Credentials and select Create Credentials and choose OAuth client ID.

5. Create an OAuth client ID, for the application type select Web application, name your project and make sure to add the uri's below. If your localhost is on a different port, make sure to use that port instead of 3000.

6. Lastly, a Client ID and Client Secret will be created, make sure to copy that somewhere safe because we will be including that in our .env file in the next section.

Step 4: Configure the Google Provider in T3 Stack

Now that we have our Google Client ID and Client Secret. We need to include them in our .env file. ***Make sure the NEXTAUTH_URL is using the same localhost port you initialized above in the Google Cloud Platform.

DATABASE_URL="file:./db.sqlite"
NEXTAUTH_SECRET="adfadfadglkjoiujoiujoij"
NEXTAUTH_URL="http://localhost:3000"

# Next Auth Google Provider
GOOGLE_CLIENT_ID="our_client_id_we_just_generated"
GOOGLE_CLIENT_SECRET="our_client_secret_we_just_generated"

Then we need to update the sections of our env.mjs file, we will be replacing anywhere that has DISCORD_CLIENT_ID or DISCORD_CLIENT_SECRET with GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET.

const server = z.object({
  DATABASE_URL: z.string().url(),
  NODE_ENV: z.enum(["development", "test", "production"]),
  ...

  // ADDED HERE
  GOOGLE_CLIENT_ID: z.string(),
  GOOGLE_CLIENT_SECRET: z.string(),
});

const processEnv = {
  DATABASE_URL: process.env.DATABASE_URL,
  NODE_ENV: process.env.NODE_ENV,
  NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
  NEXTAUTH_URL: process.env.NEXTAUTH_URL,

  // ADDED HERE
  GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
  GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
};

In the /src/server/auth.ts file, the default T3 stack uses the Discord Provider.
We will replace it with the Google Provider.

import GoogleProvider from "next-auth/providers/google";

...

export const authOptions: NextAuthOptions = {
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
        // session.user.role = user.role; <-- put other properties on the session here
      }
      return session;
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [

    // ADDED HERE
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
  ],
};

Step 5: Setting up our PostgreSQL Database

We need a place to store our user information and sessions. I use Railway to create my postgresql database. I press Start a New Project.

I select Provision PostgreSQL.

Then copy the DATABASE_URL to then be used inside our .env file.

We have finished setting up our database!

Step 6: Using Prisma to push our Schema to our Database

At the moment our database is empty. We need to push our default schema up by opening up a terminal and running the command below.

npx prisma db push

That should then populate our database with the necessary tables and parameters.

Step 7: Final Step

Now we can run our project and see if we can sign in using the Google Provider. Make sure you are INSIDE the project directory, run the npm run dev command in the terminal and open a browser and navigate to http://localhost:3000. The screen below should show up. Click on Sign in.

It should then navigate you here. Click on the Sign in with Google button.

Then it will take you through Google's authentication.

Sign in using a different gmail account than the one you used to create the Client ID and Client Secret. Or else it will give you the screen below and will not let you in.

If it worked, then it should navigate you here.

And once you are logged in your screen should look something like this.

Conclusion

Hopefully, if you have reached this point you were able to successfully add the Google Provider to your T3 Stack. And now you can build awesome web applications! If you have any questions or get stuck feel free to message me on Twitter.