rag
remix-auth-google
npm i remix-auth-google
rag

remix-auth-google

<!-- Description -->

by Bhanu Teja Pachipulusu

1.2.0 (see all)License:MITTypeScript:Built-In
npm i remix-auth-google
Readme

GoogleStrategy

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

Supported runtimes

RuntimeHas 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

import { GoogleStrategy } from "remix-auth-google";

let googleStrategy = new GoogleStrategy(
  {
    clientID: "YOUR_CLIENT_ID",
    clientSecret: "YOUR_CLIENT_SECRET",
    callbackURL: "https://example.com/auth/google/callback";
  },
  async ({accessToken, refreshToken, extraParams, profile}) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ email: profile.emails[0].value });
  }
);

authenticator.use(googleStrategy);

Setup your routes

// app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/google" method="post">
      <button>Login with Google</button>
    </Form>
  )
}
// app/routes/auth/google.tsx
import { ActionArgs } from 'remix'
import { authenticator } from '~/auth.server'

export let loader = () => redirect('/login')

export let action = ({ request }: ActionArgs) => {
  return authenticator.authenticate('google', request)
}
// app/routes/auth/google/callback.tsx
import { LoaderArgs } from 'remix'
import { authenticator } from '~/auth.server'

export let loader = ({ request }: LoaderArgs) => {
  return authenticator.authenticate('google', request, {
    successRedirect: '/dashboard',
    failureRedirect: '/login',
  })
}
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate