@ 曲线/ remix- auth- google

伪造 更新自 https://github.com/pbteja1998/remix-auth-google (中文(简体) ) 来使用最新的 remix-auth-oauth2 战略.

Google策略被用来认证用户对一个Google账户的认证. 它扩展了OAuth2战略.

支持的运行时间

使用量

创建 OAuth 应用程序

继续前进 谷歌文档 创建新的应用程序,并获得客户身份和秘密.

创建策略实例

// app/services/auth.server.ts
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)

设置路线

// 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 { redirect, type ActionFunctionArgs } from '@remix-run/node'
import { authenticator } from '~/services/auth.server'

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

export let action = ({ request }: ActionFunctionArgs) => {
  return authenticator.authenticate('google', request)
}

// app/routes/auth.google.callback.tsx
import type { LoaderFunctionArgs } from '@remix-run/node'
import { authenticator } from '~/services/auth.server'

export let loader = ({ request }: LoaderFunctionArgs) => {
  return authenticator.authenticate('google', request, {
    successRedirect: '/dashboard',
    failureRedirect: '/login',
  })
}