React Simple OAuth2 Login
🏆 Credits: this component is based on React GitHub Login by Checkr.
Simple React component for OAuth2 login.
Supports Authorization Code and Implicit Grant flows.
RTFM
Usage
Basic example
The component displays as a simple button. Clicking it will open the authorization screen for your chosen provider, in a popup (thus avoiding losing your app's state).
Four props are mandatory: authorizationUrl, responseType, clientId, redirectUri.
The client ID is given by the OAuth2 provider (usually along with a client secret) when you set up an OAuth2 app (where you're asked to fill in the Redirect URI).
import React from 'react';
import ReactDOM from 'react-dom';
import OAuth2Login from 'react-simple-oauth2-login';
const onSuccess = response => console.log(response);
const onFailure = response => console.error(response);
ReactDOM.render(
<OAuth2Login
authorizationUrl="https://accounts.spotify.com/authorize"
responseType="token"
clientId="9822046hvr4lnhi7g07grihpefahy5jb"
redirectUri="http://localhost:3000/oauth-callback"
onSuccess={onSuccess}
onFailure={onFailure}/>,
document.getElementById('root')
);Example app
Check out the examples in the example directory. You'll need OAuth2 apps configured on whatever provider.
Client app
Setup:
cd example/clientnpm install- Copy
settings.sample.jsassettings-code.jsand/orsettings-implicit.js, depending on which flow you intend to test. -
npm start(uses Parcel)
The client app provides examples for both flows. If you look at the two components, what really distinguishes how they use the component is:
- The value of
responseTypeprop, - The
fetchcall to send the code to the server in the Authorization Code example.
Server app
The server app is only given as an example to test the Authorization Code flow. It currently supports getting access tokens from GitHub or Spotify. In a real-world app, you'll probably want to use Passport.
Right after you run npm install, you need to copy .env.sample as .env, and modify the values according to your needs.
-
OAUTH_TOKEN_URLis the URL where you should POST the code obtained from the authorization screen, -
OAUTH_CLIENT_IDis the OAuth2 Client ID, -
OAUTH_CLIENT_SECRETis the OAuth2 Client Secret, -
OAUTH_REDIRECT_URIis the OAuth2 Redirect URI (thanks Captain Obvious).
The Client ID and Redirect URI should match that of the client app.
Then you can run npm start.
Cross Origin / Same-origin Policy
See the documentation on Same-origin policy
If you are using the Authorization Code flow, and your redirect URL is on a server with a different domain to your frontend, you will need to do the following:
- Set the
isCrossOriginproperty totrue - Set up your authorization url on your server to return a standard response similar to the one below:
<html>
<head></head>
<body>
<script>
window.addEventListener("message", function (event) {
if (event.data.message === "requestResult") {
event.source.postMessage({"message": "deliverResult", result: {...} }, "*");
}
});
</script>
</body>
</html>
Your server needs to populate the result key with an object to deliver back to the frontend.
Props
authorizationUrl
{string} required
Base URL of the provider's authorization screen.
responseType
{string} required
Determines the type of OAuth2 flow. Two possible values:
-
code: Authorization Code flow. You need a server-side app to use this. -
token: Implicit Grant flow.
clientId
{string} required
Client ID for OAuth application.
redirectUri
{string} required
Registered redirect URI for OAuth application.
scope
{string}
Scope for OAuth application. Example: user:email (GitHub).
popupWidth
{number}
Width for the popup window upon clicking the button in px. Default: 680.
popupHeight
{number}
Height for the popup window upon clicking the button in px. Default: 680.
className
{string}
CSS class for the login button.
buttonText
{string}
Text content for the login button.
isCrossOrigin
{bool}
Is this a cross-origin request? If you are implementing an Authorization Code workflow and your server backend is on a different URL, you'll need to set this to true.
extraParams
{object}
This allows you to pass extra query parameters to the OAuth2 login screen. Some providers allow additional parameters. See issue #39 on the repo for more details. If you want to add prompt=consent to the query string, you need to pass extraParams={{ prompt: 'consent' }} as a prop.
render
{function}
A custom rendering function. An object containing properties for rendering will be passed in as an
argument, e.g. {buttonText: "...", children: [...], className: "...", onClick: func}.
onRequest
{function}
Callback for every request.
onSuccess
{function}
Callback for successful login. An object will be passed as an argument to the callback, e.g. { "code": "..." }.
onFailure
{function}
Callback for errors raised during login.
ChangeLog
-
v0.5.1 (published August 25th, 2021)
- Allow to pass extra params in the query string, via the
extraParamsprop. Thanks to jshthornton
- Allow to pass extra params in the query string, via the
-
v0.5.0 (published June 18th, 2021)
-
v0.4.0 (published June 18th, 2021)
- Support cross-origin auth flow: previous versions worked only if the redirect URI was derived from the frontend app's URL; now you can have a redirect URI poiting to your backend app. Thanks (again) to rsnyman.
- Update dev dependencies: ESLint, Enzyme
- Restore unit tests to working state
- End-to-end testing of Authorization Code flow (using a Node-based OAuth2 server)
-
v0.3.0 (Changes made in May, 2021 - published June 18th, 2021) - thanks to rsnyman for both additions:
- Add
renderprop to customize the login button's appearance - Add MIT license
- Add
-
v0.2.0 (October 25th, 2020):
- Add support for Implicit Grant flow
- Improve error handling
- Provide better example app (with a sample server-side app)
- Try and provide a decent Readme
-
v0.1.x (January to September 2020th):
- Spin the project off from React GitHub Login
- Make it support various OAuth2 providers, only for Authorization Code flow
Contributors ✨
Thanks goes to these wonderful people (emoji key):
 Benoît Hubert |
 Raoul Snyman |
 Coow |
 Manuel |
 Stewart Park |
 Jure Sotosek |
 Joshua Thornton |
 Kalyan |
This project follows the all-contributors specification. Contributions of any kind welcome!