React googleyolo
Simple googleyolo Provider
and withGoogleyolo
HOC-style method that fishes the library out of the context and passes it to the "connected" components as a prop.
Googleyolo is of course what google calls its smartlock / one-tap sign-up and sign-in library.
Usage
Feel free to look at the source code for the simplest of examples!
You'll be using it somewhat like ...
// somewhere near your app's entry point: index.js, app.js etc. // import YoloProvider from 'react-googleyolo' // also works { return <YoloProvider> <TheRestOfYourApp /> </YoloProvider> }
// in a component that needs googleyolo // ... state = isLoading: false googleyolo { const googleyolo = thisprops if googleyolo this this } { const googleyolo = thisprops const isLoading = thisstate if googleyolo & !isLoading && !prevPropsgoogleyolo this this } { const isLoading user = thisstate if isLoading return <div>Loading auth...</div> if user return <div>You are logged in as userdisplayName</div> // Imaginary component that signs you in // It probably also uses `googleyolo` to call `.hint()`! return <GoogleLogin /> } Header
We expose a Provider
, which loads the googleyolo
client library. All this came about because google didn't seem to publish an npm package for it! The Provider
then simply puts the googleyolo
object in the context for any component further down the tree to use.
We also expose a withGoogleyolo
helper method to fish out googleyolo
from the context, without you going into the hassle of defining context types.
But because defining a context type is all that "connect" method does, we also provide a GoogleyoloShape
in case you are comfortable with your components using things straight out of context.
Automatic Retrieval
In case the above seems like too much work, you may also provide a clientId
string and an onRetrieveSuccess
method to the Provider
. This will make it do the retrieve call for you, calling your method afterwards with the received credential!
return <YoloProvider clientId=processenvREACT_APP_GOOGLE_CREDENTIALS_CLIENT_ID onRetrieveSuccess=thisonRetrieveSuccess onRetrieveFailure=thisonRetrieveFailure > <Home /> </YoloProvider>
User Signout
We also expose a handy Logout
component you can customize to your heart's content. All it really does is googleyolo.disableAutoSignIn()
for you on click, and then call its onAutoSignInDisabled
you optionally gave it.
return <Logout /> // feel free to pass in children return <Logout>Click here to logout forever</Logout> // Or specify a different type of node if you don't want it to be a button return <Logout node="span" />
User Signin re-prompt
Finally and due to popular demand, we now offer a similar Login
button. Give it a clientId
and it will make Google's official login flow appear. You may also give it something to do onLoginSuccess
, or error, making this component a bit of a cross between the Provider
and the Logout
button.
return <Login clientId="iGotThisFromGoogle" /> // feel free to pass in children return <Login clientId=processenvREACT_APP_GOOGLE_CREDENTIALS_CLIENT_ID onRetrieveSuccess=thisonLoginSuccess onLoginFailure=thisonRetrieveFailure > Would you like to login? </Login>) // Or specify a different type of node if you don't want it to be a button return <Login node="span" clientId="somanyapikeys" />