React-google-authentication NPM

React Google Login/Auth Component

A React Google oAUth Callback Component

Installation

npm install react-google-authentication

or
yarn add react-google-authentication

Usage

 <GoogleLogin onFailure={responseErrorGoogle}
               onSuccess={responseSuccessGoogle}
               authenticationUrl="https://example.com/auth/google"
               requestUrl="https://example.com/auth/google/url">
            Login with Google
  </GoogleLogin>

#How to setup requestUrl is the google oauth url you created in the backend should be returned.

Value should be

{"url":"https://accounts.google.com/o/oauth2/auth?client_id=XXXX"}

The generated url opens in a popup and requests Google user permission. The user is then redirected to the callback address defined on google. After the authentication process you do in the backend, json data callback into onSuccess.

Options

params	value	default value	description
tag	string	button	tag that should be used to create element that will be used as loging element
text	string	Sign in with Google	text that will be shown in component
requestUrl	string		This address should return a json value. Value should be `{"url":"https://accounts.google.com/o/oauth2/auth?client_id=XXXX"}`
authenticationUrl	string		URL that will be used to get authentication
onFailure	function		function that will be called if user cannot be authenticated
onSuccess	function		function that will be called if user is successfully authenticated
disabled	boolean	false	disable component
style	object		style object
className	string		class name for component
dialogWidth	number	600	dialog width
dialogHeight	number	400	dialog height
credentials	string	same-origin	indicates whether the user agent should send cookies from the other domain in the case of cross-origin requests. Possible values: `omit`, `same-origin`, `include`
customHeaders	object	{}	custom headers should be object with fields that needs to be sent to user server. Field name will be used as header key and field value as header value. Because of bug in fetch implementation all keys will be lowercase.
children	node		this props can be used in order to override default component content
forceLogin	bool	false	force user to authenticate with Twitter username and password
screenName	string		prefills the username input box of the OAuth login screen with the given value