React OAuth is a collection of production-ready OAuth2 libraries for React applications. Each package is designed to be simple, type-safe, and easy to integrate into your projects.
| Package | Description | NPM |
|---|---|---|
| @react-oauth/google | Google OAuth2 using the new Google Identity Services SDK |  |
| @react-oauth/github | Modern React hook for GitHub OAuth authentication |  |
npm install @react-oauth/google
# or
yarn add @react-oauth/googleBasic Usage:
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>
);
}Features:
- ✅ Sign In With Google button
- ✅ One-tap sign-up
- ✅ Automatic sign-in
- ✅ Custom login buttons
- ✅ Implicit & Authorization Code flows
- ✅ Full TypeScript support
npm install @react-oauth/github
# or
yarn add @react-oauth/githubBasic Usage:
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);
// Exchange code for access token on your backend
},
onError: error => {
console.error('Authentication failed:', error);
},
});
return (
<button onClick={initiateGitHubLogin} disabled={isLoading}>
{isLoading ? 'Loading...' : 'Sign in with GitHub'}
</button>
);
}Features:
- ✅ Production-ready React hook
- ✅ Fully typed with TypeScript
- ✅ Zero runtime dependencies
- ✅ Flexible API with complete UI control
- ✅ Comprehensive error handling
- ✅ Built-in CSRF protection
- Complete API Reference 🚀 - Full documentation with all props, hooks, and examples
- Google Identity Services Docs - Official Google documentation
- Live Demo - Interactive playground for Google OAuth
- Complete API Reference 🚀 - Full documentation with examples and error handling
- GitHub OAuth Docs - Official GitHub OAuth documentation
Check out the live demo to see the Google OAuth package in action:
🔗 https://react-oauth.vercel.app/ (Google OAuth only)
Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ for the React community
