React Google OAuth 2.0
Easily add Google OAuth 2.0 Single Sign On to a React app & let your server handle your access & refresh tokens. This library will work directly with Flask JWT Router & provide Google OAuth 2.0 integration out of the box with minimal setup.
Docs: https://joegasewicz.github.io/react-google-oauth2.0/
Install
npm install react-google-oauth2Quick Start
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
GoogleButton,
IAuthorizationOptions,
isLoggedIn,
createOAuthHeaders,
logOutOAuthUser,
GoogleAuth,
} from "react-google-oauth2";
function App(props: any) {
const options: IAuthorizationOptions = {
clientId: (process.env.CLIENT_ID as string),
redirectUri: "http://localhost:3000/react-google-Oauth2.0/dist/index.html",
scopes: ["openid", "profile", "email"],
includeGrantedScopes: true,
accessType: "offline",
};
return (
<>
<GoogleButton
placeholder="demo/search.png" // Optional
options={options}
apiUrl="http://localhost:5000/google_login"
defaultStyle={true} // Optional
/>
</>
);
}
ReactDOM.render(
</App>,
document.getElementById("main"),
);GoogleAuth Provider & GoogleAuthConsumer
Get notified when a user has logged in successfully by wrapping the
GoogleButton component within the GoogleAuth provider.
You can then use the GoogleAuthConsumer to redirect to your authorized routes
when {isAuthenticated} is true.
For example:
import {
GoogleAuth,
GoogleButton,
GoogleAuthConsumer,
IOAuthState,
} from "react-google-oauth2";
<GoogleAuth>
<GoogleAuthConsumer>
{({responseState, isAuthenticated}: IOAuthState) => {
if (!isAuthenticated) {
return <GoogleButton
placeholder="demo/search.png" // Optional
options={options}
apiUrl="http://localhost:5000/google_login"
defaultStyle={true} // Optional
displayErrors={true}>Sign in with google</GoogleButton>;
} else {
if (responseState.accessToken) { // You can also use isLoggedIn()
// Now send a request to your server using createOAuthHeaders() function
fetch(url, {
headers: createOAuthHeaders(),
})
.then(data => console.log("Horay We're logged in!"))
.catch(err => console.error("Just because you have a gmail account doesn't mean you have access!"))
}
}
}}
</GoogleAuthConsumer>
</GoogleAuth>OAuth2.0 Helper Functions
Check if OAuth2.0 user is logged in
if(isLoggedIn()) { // returns true is accessToken exists in LocalStorage
// user logged code...
}Creat OAuth2.0 Server Headers
// Using Fetch API example:
fetch(url, {
headers: createOAuthHeaders(),
});Log out OAuth2.0 users
logOutOAuthUser() // removes the accessToken from LocalStorageYour Rest API endpoint details
The GoogleButton component will make the following request to your api:
POST options = {body: { code: <code>, scope: <scope> }} URL = `apiUrl`
Update prompts
If for example your user updates their email in your app & you redirect them to the login again, Google will by default skip the Google email select screen & log you in with your existing credentials. To stop this happening you can use the following function:
setPrompt("select_account");Below is an example with setPrompt function resetting your
const sso_options: IAuthorizationOptions = {
clientId: "<CLIENT_ID>",
redirectUri: `http://localhost:3000/login`,
scopes: ["openid", "profile", "email"],
accessType: "offline",
};Then in your login component it could look like this:
<GoogleAuth>
<GoogleAuthConsumer>
{({ responseState, isAuthenticated, setPrompt }: IOAuthState) => {
if (!isAuthenticated) {
// Here we are using Lodash fp to get our prompt value
// passed from the React Router location API e.g:
// history.push({ pathname: "/login", { prompt: "select_account" });
const prompt = fp.get("state.prompt", location);
if (prompt) {
// this will now set sso_option.prompt = "select_account"
// for this login attempt, then the auto login flow will
// continue as normal
setPrompt(prompt);
}
return <StyledGoogleButton>
<GoogleButton
defaultStyle={false}
options={sso_option}
apiUrl="http://localhost:3000/users/login"
>Login</GoogleButton>
</StyledGoogleButton>;
} else {
if (responseState?.accessToken && isOAuthLoggedIn()) {
updateShouldFetch(isOAuthLoggedIn());
if (staff) {
return <Redirect to="/staff"/>;
} else {
return null;
}
}
return null;
}
}}
</GoogleAuthConsumer>
</GoogleAuth>Access tokens for e2e tests
To test your React app with an e2e testing framework such as cypressIO
you can use the exchangeToken function.
The exchangeToken function fetches the new access token and sets it into local storage and also
returns the access token.
Example to fetch and set an access token in local storage
exchangeToken(CLIENT_ID, REFRESH_TOKEN, CLIENT_SECRET)
.then(accessToken => {
console.log(accessToken) // your access token...
});If you require an access token to run your e2e tests then exchangeToken will set and return a new access token.
import { exchangeToken,getAccessToken, createOAuthHeaders } from "react-google-oauth2";
describe("test something...", () => {
Cypress.Commands.add("loginSSO", (overrides = {}) => {
Cypress.log({
"name": "loginSSO",
});
// Fetche an access token before each tests only if there isn't one present
if(!getAccessToken()) {
exchangeToken(CLIENT_ID, REFRESH_TOKEN, CLIENT_SECRET)
.then(accessToken => {
cy.request({
method: 'GET',
url: `${API_URL}/staff`,
headers: createOAuthHeaders(),
});
});
}
});
beforeEach(() => {
cy.loginSSO();
});
});Flask-JWT-Router
If you are using Flask as your REST api framework then this library is designed to work
directly with flask-jwt-router. See Flask JWT Router
for more details.
Styling
To Style the <button> element with CSS, use google-oauth-btn selector. For example:
.google-oauth-btn {
color: red;
background-color: lime;
}
(you can also pass your css selectors directly with Reacts' className prop)