oauthify

OAuthify

The OAuthify library provides a seamless integration for adding OAuth-based login functionality into your React application. This package comes with pre-built components for Google and GitHub login buttons, making the OAuth flow implementation straightforward and efficient.

Key Features

• Easy Integration: Simplifies the addition of Google and GitHub login buttons to your React app.
• Secure Authentication: Redirects users to the respective service's login page and securely handles the OAuth callback.
• Customizable: Allows for custom handling of successful or failed logins, enabling you to tailor the user experience.

Installation

To install OAuthify, run:

npm install oauthify

Usage

Implementing OAuthify in your React application involves three simple steps:

1. Wrap your application with <OAuthifyProvider />.
2. Add the <OAuthifyRedirect /> component to handle the OAuth callback.
3. Utilize the <GoogleLoginButton /> or <GithubLoginButton /> components as needed.

Detailed Steps

OAuthifyProvider

To use the OAuthify Provider, wrap your entire application with <OAuthifyProvider>:

import React from 'react';
import { OAuthifyProvider, GoogleLoginButton } from 'oauthify';

const App = () => {
  const handleSuccess = (response) => {
    console.log('Google login success:', response);
    // Handle successful login, e.g., set user info in app state
  };

  const handleFailure = (error) => {
    console.error('Google login failure:', error);
    // Handle failed login, e.g., show error message to user
  };

  return (
    <OAuthifyProvider>
      <div>
        <h1>My App</h1>
        <GoogleLoginButton
          clientId="your-google-client-id"
          onSuccess={handleSuccess}
          onFailure={handleFailure}
          redirectUri={`${window.location.origin}/oauthify-redirect`}
        />
      </div>
    </OAuthifyProvider>
  );
};

export default App;

GoogleLoginButton

To use the Google login button:

1. Import and use the GoogleLoginButton component:

import React from 'react';
import { GoogleLoginButton } from 'oauthify';

const App = () => {
  const handleSuccess = (response) => {
    console.log('Google login success:', response);
  };

  const handleFailure = (error) => {
    console.error('Google login failure:', error);
  };

  return (
    <div>
      <GoogleLoginButton
        clientId="YOUR_GOOGLE_CLIENT_ID"
        redirectUri={`${window.location.origin}/oauthify-redirect`}
        onSuccess={handleSuccess}
        onFailure={handleFailure}
      >
        Login with Google
      </GoogleLoginButton>
    </div>
  );
};

export default App;

1. Add a redirect page to handle the OAuth callback:

In your router configuration file:

import { OAuthifyRedirect } from 'oauthify';

{
  path: '/oauthify-redirect',
  component: OAuthifyRedirect
}

GitHubLoginButton

To use the GitHub login button:

1. Import and use the GitHubLoginButton component:

import React from 'react';
import { GitHubLoginButton } from 'oauthify';

const App = () => {
  const handleSuccess = (response) => {
    console.log('GitHub login success:', response);
  };

  const handleFailure = (error) => {
    console.error('GitHub login failure:', error);
  };

  return (
    <div>
      <GitHubLoginButton
        clientId="YOUR_GITHUB_CLIENT_ID"
        redirectUri={`${window.location.origin}/oauthify-redirect`}
        onSuccess={handleSuccess}
        onFailure={handleFailure}
      >
        Login with GitHub
      </GitHubLoginButton>
    </div>
  );
};

export default App;

1. Reuse the same redirect page for handling OAuth callback as described for GoogleLoginButton.

Contributions

We welcome and appreciate contributions! If you want to contribute, please follow these steps:

1. Fork the repository on GitHub.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -am 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a Pull Request.

We encourage contributions for adding support for other providers, improving documentation, and fixing bugs. If you find this project helpful, please give it a star on GitHub to help others discover it!

Resources

• GitHub Repository: OAuthify on GitHub
• NPM Package: OAuthify on NPM
• Google OAuth Documentation: Google Identity Platform
• GitHub OAuth Documentation: GitHub OAuth Apps

Keywords

React, OAuth, Google Login, GitHub Login, Authentication, React Component, OAuth Provider, React OAuth, OAuthify, Login Button

License

This project is licensed under the MIT License - see the LICENSE.md file for details.