To install the package, run:
npm install authifyTo use the Google login button:
- Import and use the
GoogleLoginButtoncomponent in your React application:
import React from 'react';
import GoogleLoginButton from 'authify/GoogleLoginButton';
const App = () => {
const handleSuccess = (response) => {
console.log('Google login success:', response);
};
const handleFailure = (error) => {
console.error('Google login failure:', error);
};
return (
<div>
<GoogleLoginButton
googleClientId="YOUR_GOOGLE_CLIENT_ID"
redirectUri="{base_url}/oauth-redirect"
onSuccess={handleSuccess}
onFailure={handleFailure}
variant="custom" // or "renderedButton"
>
Login with Google
</GoogleLoginButton>
</div>
);
};
export default App;- Add a redirect page to handle the OAuth callback:
Create public/oauth-redirect.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>OAuth Redirect</title>
<link rel="stylesheet" href="/path/to/your/styles.css" />
</head>
<body>
<div id="root">Redirecting...</div>
<script>
window.onload = function () {
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const error = params.get('error');
if (code) {
window.opener.postMessage({ code }, window.location.origin);
} else if (error) {
window.opener.postMessage({ error }, window.location.origin);
}
window.close();
};
</script>
</body>
</html>To use the GitHub login button:
- Import and use the
GitHubLoginButtoncomponent in your React application:
import React from 'react';
import GitHubLoginButton from 'authify/GitHubLoginButton';
const App = () => {
const handleSuccess = (response) => {
console.log('GitHub login success:', response);
};
const handleFailure = (error) => {
console.error('GitHub login failure:', error);
};
return (
<div>
<GitHubLoginButton
githubClientId="YOUR_GITHUB_CLIENT_ID"
redirectUri="http://localhost:3000/oauth-redirect"
onSuccess={handleSuccess}
onFailure={handleFailure}
variant="custom" // or "renderedButton"
>
Login with GitHub
</GitHubLoginButton>
</div>
);
};
export default App;- Add the same redirect page for handling OAuth callback as described for GoogleLoginButton.
We welcome contributions! If you would like to contribute, please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/YourFeature). - Commit your changes (
git commit -am 'Add some feature'). - Push to the branch (
git push origin feature/YourFeature). - 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!