oauthify - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

package.json

		@@ -6,5 +6,17 @@ {
		"module": "dist/esm/index.js",
		"keywords": [
		"react",
		"auth",
		"oauth",
		"OAuth 2.0",
		"google",
		"github",
		"login",
		"signin",
		"signup",
		"authentication"
		],
		"types": "dist/types/index.d.ts",
		"private": false,
		"version": "0.0.8",
		"version": "0.0.9",
		"type": "module",
		@@ -11,0 +23,0 @@ "files": [

144

README.md

		@@ -1,30 +0,132 @@
		# React + TypeScript + Vite
		### Authify

		This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
		### Installation

		Currently, two official plugins are available:
		To install the package, run:

		- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
		- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
		```bash
		npm install authify
		```

		## Expanding the ESLint configuration
		### Usage

		If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
		#### GoogleLoginButton

		- Configure the top-level `parserOptions` property like this:
		To use the Google login button:

		```js
		export default {
		// other rules...
		parserOptions: {
		ecmaVersion: 'latest',
		sourceType: 'module',
		project: ['./tsconfig.json', './tsconfig.node.json'],
		tsconfigRootDir: __dirname,
		},
		}
		1. Import and use the `GoogleLoginButton` component in your React application:

		```javascript
		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;
		```

		- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
		- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
		- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
		2. Add a redirect page to handle the OAuth callback:

		Create `public/oauth-redirect.html`:

		```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>
		```

		#### GitHubLoginButton

		To use the GitHub login button:

		1. Import and use the `GitHubLoginButton` component in your React application:

		```javascript
		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;
		```

		2. Add the same redirect page for handling OAuth callback as described for GoogleLoginButton.

		### Contributions

		We welcome contributions! If you would like to contribute, please follow these steps:

		1. Fork the repository.
		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!

oauthify - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics