React OAuth Login Form

A beautiful, modern React component for login/register forms with Google and GitHub OAuth integration.

Features

• 🎨 Beautiful, modern UI design
• 🔐 Google OAuth integration
• 🐙 GitHub OAuth integration
• 📧 Traditional email/password authentication
• 📱 Fully responsive design
• ⚡ Lightweight and fast
• 🎛️ Highly customizable
• 🔒 TypeScript ready

Installation

npm install react-oauth-login-form

Quick Start

import React from 'react';
import { LoginForm } from 'react-oauth-login-form';

function App() {
  const handleGoogleLogin = () => {
    console.log('Google login clicked');
  };

  const handleGithubLogin = () => {
    console.log('GitHub login clicked');
  };

  const handleEmailLogin = (email, password) => {
    console.log('Email login:', email, password);
  };

  const handleRegister = (email, password) => {
    console.log('Register:', email, password);
  };

  return (
    <LoginForm
      onGoogleLogin={handleGoogleLogin}
      onGithubLogin={handleGithubLogin}
      onEmailLogin={handleEmailLogin}
      onRegister={handleRegister}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onGoogleLogin | function | - | Callback for Google login button click | | onGithubLogin | function | - | Callback for GitHub login button click | | onEmailLogin | function | - | Callback for email login (email, password) | | onRegister | function | - | Callback for registration (email, password) | | googleClientId | string | - | Google OAuth client ID | | githubClientId | string | - | GitHub OAuth client ID | | redirectUri | string | current URL | OAuth redirect URI | | showRegister | boolean | true | Show register toggle | | customStyles | object | {} | Custom CSS classes | | title | string | "Welcome" | Form title |

OAuth Setup

Google OAuth

1. Go to Google Cloud Console
2. Create a new project or select existing
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add your domain to authorized origins

<LoginForm
  googleClientId="your-google-client-id"
  redirectUri="https://your-app.com/callback"
  onGoogleLogin={() => {
    // Will redirect to Google OAuth
  }}
/>

GitHub OAuth

1. Go to GitHub Settings > Developer settings > OAuth Apps
2. Create a new OAuth App
3. Set authorization callback URL

<LoginForm
  githubClientId="your-github-client-id"
  redirectUri="https://your-app.com/callback"
  onGithubLogin={() => {
    // Will redirect to GitHub OAuth
  }}
/>

Custom Styling

You can customize the appearance using the customStyles prop:

<LoginForm
  customStyles={{
    container: 'my-container-class',
    form: 'my-form-class',
    title: 'my-title-class',
    googleButton: 'my-google-btn-class',
    githubButton: 'my-github-btn-class',
    input: 'my-input-class',
    submitButton: 'my-submit-btn-class'
  }}
/>

Demo Mode

If you don't provide OAuth client IDs, the buttons will open the respective login pages in a new tab for demo purposes.

Examples

Full OAuth Integration

import React from 'react';
import { LoginForm } from 'react-oauth-login-form';

function AuthPage() {
  const handleGoogleLogin = async () => {
    // Handle Google OAuth flow
    try {
      // Your Google OAuth implementation
    } catch (error) {
      console.error('Google login failed:', error);
    }
  };

  const handleGithubLogin = async () => {
    // Handle GitHub OAuth flow
    try {
      // Your GitHub OAuth implementation
    } catch (error) {
      console.error('GitHub login failed:', error);
    }
  };

  const handleEmailLogin = async (email, password) => {
    // Handle email/password login
    try {
      const response = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });
      // Handle response
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return (
    <LoginForm
      googleClientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
      githubClientId={process.env.REACT_APP_GITHUB_CLIENT_ID}
      onGoogleLogin={handleGoogleLogin}
      onGithubLogin={handleGithubLogin}
      onEmailLogin={handleEmailLogin}
      title="Sign In to MyApp"
    />
  );
}

Customized Styling

<LoginForm
  customStyles={{
    container: 'dark-theme',
    form: 'shadow-lg',
    title: 'text-blue-600',
    googleButton: 'hover:bg-red-50',
    githubButton: 'hover:bg-gray-50'
  }}
  title="Welcome Back!"
/>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT © [Your Name]

Changelog

1.0.0

• Initial release
• Google OAuth integration
• GitHub OAuth integration
• Email/password authentication
• Responsive design
• Custom styling support