Package Exports

@coji/remix-auth-google
@coji/remix-auth-google/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@coji/remix-auth-google) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

GoogleStrategy

The Google strategy is used to authenticate users against a Google account. It extends the OAuth2Strategy.

Supported runtimes

Runtime	Has Support
Node.js	✅
Cloudflare	✅

Usage

Create an OAuth application

Follow the steps on the Google documentation to create a new application and get a client ID and secret.

Create the strategy instance

// app/services/auth.server.ts
import { Authenticator } from 'remix-auth'
import { GoogleStrategy } from 'remix-auth-google'
import { createCookieSessionStorage, redirect } from 'react-router'

export type SessionUser = {
  id: string
  email: string
  displayName: string
  pictureUrl: string
}

let SESSION_KEY = 'user'
export const sessionStorage = createCookieSessionStorage<{
  [SESSION_KEY]: SessionUser
}>({
  cookie: {
    name: '__session',
    httpOnly: true,
    path: '/',
    sameSite: 'lax',
    secrets: [process.env.SESSION_SECRET],
    secure: process.env.NODE_ENV === 'production',
  },
})

export const getSession = async (request: Request) => {
  return await sessionStorage.getSession(request.headers.get('Cookie'))
}

export const getSessionUser = async (request: Request) => {
  const session = await getSession(request)
  return session?.get(SESSION_KEY)
}

export const saveSession = async (request: Request, user: SessionUser) => {
  const session = await getSession(request)
  session.set(SESSION_KEY, user)
  return new Headers({
    'Set-Cookie': await sessionStorage.commitSession(session),
  })
}

const googleStrategy = new GoogleStrategy(
  {
    clientId: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
    redirectURI: 'https://example.com/auth/google/callback',
  },
  async ({ accessToken, tokens }) => {
    // Get the user data from your DB or API using the tokens and profile
    const profile = await GoogleStrategy.userProfile(tokens.accessToken())
    return User.findOrCreate({ email: profile.emails[0].value })
  },
)

export const authenticator = new Authenticator<SessionUser>()
authenticator.use(googleStrategy)

Setup your routes

// app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/google" method="GET">
      <button>Login with Google</button>
    </Form>
  )
}

// app/routes/auth.google.tsx
import { authenticator } from '~/services/auth.server'
import type { Route } from './+types/auth.google'

export const loader = async ({ request }: Route.LoaderArgs) => {
  return await authenticator.authenticate('google', request)
}

// app/routes/auth.google.callback.tsx
import { redirect } from 'react-router'
import { authenticator, saveSession } from '~/services/auth.server'
import type { Route } from './+types/auth.google.callback'

export let loader = ({ request }: Route.LoaderArgs) => {
  const user = authenticator.authenticate('google', request)
  const headers = await saveSession(user)
  return redirect('/dashboard', { headers })
}