How to add google and facebook authentication?

[zwl1619]

How to add google and facebook authentication?

[lucasbaze]

I would recommend following the documentation located here: https://blitzjs.com/docs/passportjs as I find passport.js to be fairly easy to use and is already supported with Blitz.

In particular with Google and Facebook you'll need developer accounts if you haven't already attained those and then follow their 0Auth app creation process. For google, this video should do the trick.

You'll need to import npm install passport-google-oauth20 as well.

This is my api/auth/[...auth].ts file:

import { passportAuth } from "blitz"
import { Strategy as GoogleStrategy } from "passport-google-oauth20"
import db from "db"

console.log("Google CLient Id: ", process.env.GOOGLE_CLIENT_ID)

export default passportAuth((ctx) => ({
  successRedirectUrl: "/",
  errorRedirectUrl: "/",
  strategies: [
    {
      authenticateOptions: { scope: "openid email profile" },
      strategy: new GoogleStrategy(
        {
          clientID: process.env.GOOGLE_CLIENT_ID,
          clientSecret: process.env.GOOGLE_CLIENT_SECRET,
          callbackURL: process.env.GOOGLE_REDIRECT_URL,
        },
        async (accessToken, refreshToken, profile, done) => {
          const email = profile.emails && profile.emails[0]?.value

          if (!email) {
            // This can happen if you haven't enabled email access in your google app permissions
            return done(new Error("Google OAuth response doesn't have email."))
          }

          const user = await db.user.upsert({
            where: { email },
            create: {
              email,
              name: profile.displayName,
              profile_img: profile.photos && profile.photos[0]?.value,
            },
            update: {
              email,
              name: profile.displayName,
              profile_img: profile.photos && profile.photos[0]?.value,
            },
          })

          const publicData = {
            userId: user.id,
            roles: [user.role],
            source: "google",
          }
          done(null, { publicData, redirectUrl: "/dashboard" })
        }
      ),
    },
  ],
}))