https://github.com/pbteja1998/remix-auth-google
https://github.com/pbteja1998/remix-auth-google
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/pbteja1998/remix-auth-google
- Owner: pbteja1998
- License: mit
- Created: 2021-12-22T04:47:53.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-04T11:38:00.000Z (over 1 year ago)
- Last Synced: 2025-03-30T02:05:17.646Z (6 months ago)
- Language: TypeScript
- Size: 403 KB
- Stars: 94
- Watchers: 2
- Forks: 22
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
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](https://developers.google.com/identity/protocols/oauth2/web-server#creatingcred) to create a new application and get a client ID and secret.
### Create the strategy instance
```ts
// 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)
```
### Setup your routes
```tsx
// app/routes/login.tsx
export default function Login() {
return (
Login with Google
)
}
```
```tsx
// 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)
}
```
```tsx
// 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',
})
}
```