React OAuth

Production-ready OAuth2 authentication libraries for React. Integrate Google and GitHub login in minutes.

Google OAuth

Sign in with Google using the new Google Identity Services SDK. Supports One-tap, automatic sign-in, and custom buttons.

GitHub OAuth

GitHub OAuth authentication via a zero-dependency React hook. Full TypeScript support with built-in CSRF protection.

What is React OAuth?

React OAuth is a collection of production-ready OAuth2 libraries for React applications. Each package is independently installable, type-safe, and designed to integrate seamlessly into any React project.

Package	Description	npm
@react-oauth/google	Google OAuth2 using the new Google Identity Services SDK	npm
@react-oauth/github	Modern React hook for GitHub OAuth authentication	npm

Key features

Sign In With Google

Official Google Identity Services button with full customization: size, shape, theme, text, and more.

One-Tap & Auto Sign-In

Reduce friction with Google One-tap prompts and automatic sign-in for returning users.

Custom OAuth Flows

Use useGoogleLogin for implicit and authorization code flows with your own UI.

GitHub Auth Hook

useGitHubLogin gives you a single hook for the full GitHub OAuth popup flow.

TypeScript First

Every component, hook, and utility is fully typed with exported TypeScript interfaces.

CSRF Protection

Automatic state parameter generation and verification protects against CSRF attacks.

Quick install

Google OAuth (npm)

npm install @react-oauth/google@latest

Example: Google sign-in

import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';

function App() {
  return (
    <GoogleOAuthProvider clientId="<your_client_id>">
      <GoogleLogin
        onSuccess={credentialResponse => {
          console.log(credentialResponse);
        }}
        onError={() => {
          console.log('Login Failed');
        }}
      />
    </GoogleOAuthProvider>
  );
}

Example: GitHub sign-in

import { useGitHubLogin } from '@react-oauth/github';

function LoginButton() {
  const { initiateGitHubLogin, isLoading } = useGitHubLogin({
    clientId: 'your-github-client-id',
    redirectUri: 'http://localhost:3000/callback',
    onSuccess: response => {
      console.log('Authorization code:', response.code);
    },
    onError: error => {
      console.error('Authentication failed:', error);
    },
  });

  return (
    <button onClick={initiateGitHubLogin} disabled={isLoading}>
      {isLoading ? 'Loading...' : 'Sign in with GitHub'}
    </button>
  );
}

Get started

Google OAuth quickstart

Set up Google sign-in in your React app in under 5 minutes.

GitHub OAuth quickstart

Add GitHub authentication with a single hook and no extra dependencies.