SlideShare a Scribd company logo
1 of 30
One Tap Google Login with
ReactJs
A guide by Sufalam Technologies Pvt Ltd
Pradip Vadher
Sr. Reactjs Developer
www.sufalamtech.com
Why to choose One Tap Google Login?
● Sign-in with Google One Tap uses secure tokens, rather than login
credentials, to sign users to the web application
● An easy sign-in process is meant to help users reduce the pressure of
picking convenience over security when deciding on yet another password
for a web app
www.sufalamtech.com
Why to choose One Tap Google Login?
● Users can sign in using just one tap, without having to remember their
credentials or create a password
● Easy flow increased the sign-in with existing user and sign-up for new
users
www.sufalamtech.com
Why to choose One Tap Google Login?
● Users can sign in or sign up anywhere in the web application, It also works
after session expired
● Manual sign-up or switching accounts occur only after the user has first
signed out of your site.
www.sufalamtech.com
Why to choose One Tap Google Login?
● One Tap Google Login also works with “Sign-in with Google” Button
www.sufalamtech.com
How to implements One Tap
in ReactJs?
www.sufalamtech.com
Implement One Tap Login
Step 1
Get Google API Client Id
Step 2
Load the One-tap
Google library
Step 3
Initialize One tap to
display Sign in Popup
www.sufalamtech.com
1. Get Your Google API Client Id From
Google Console
To use Google’s one-tap sign-in flows, you need to set up your Google API
client ID. If you don’t have Google Client Id then you need to create a new
one. Use the below details to create a new client id.
https://console.cloud.google.com/apis/credentials
www.sufalamtech.com
www.sufalamtech.com
2. Load Google Javascript Client Library
The JavaScript client library for Sign In With Google and Google One Tap is
designed to be compatible with most common browsers and platforms.
<script src="https://accounts.google.com/gsi/client" async defer />
Due to security risks the JavaScript client library is only supported on the
latest two versions of each browser
www.sufalamtech.com
3. Initialize One tap to display Sign in Popup
We have to initialize the client id to the google account script that loaded in
system that we checked in the last step.
After that we have to use prompt method to display the popup of one tap
google login
www.sufalamtech.com
3. Initialize One tap to display Sign in Popup
www.sufalamtech.com
Browser Support
www.sufalamtech.com
Browser and platform combinations
www.sufalamtech.com
Example
www.sufalamtech.com
1. Load the Javascript Client Library
www.sufalamtech.com
www.sufalamtech.com
2. Add Callback method to google api
initialize block
www.sufalamtech.com
www.sufalamtech.com
3. Add Decode Method to find the user
details from the callback response
www.sufalamtech.com
www.sufalamtech.com
Browser Output
www.sufalamtech.com
www.sufalamtech.com
Browser Output
Without Existing Google Login
www.sufalamtech.com
www.sufalamtech.com
Security Concerns While
Implementing One Tap
www.sufalamtech.com
1. Google One Tap can only be displayed in
HTTPS domains.
www.sufalamtech.com
2. Due to security risks the JavaScript client
library is only supported on the latest two
versions of each browser.
3.Do not cover Google One Tap by any other
content.
www.sufalamtech.com
4. One Tap Google Login is NOT configured to
work on Private Window.
Checkout complete example on Git
Hub
https://github.com/Sufalam-
Technologies/one_tap_google_login
www.sufalamtech.com
Thank You
Follow Us On
www.sufalamtech.com

More Related Content

What's hot

JavaScript From Hell - CONFidence 2.0 2009
JavaScript From Hell - CONFidence 2.0 2009JavaScript From Hell - CONFidence 2.0 2009
JavaScript From Hell - CONFidence 2.0 2009
Mario Heiderich
 

What's hot (20)

REST-API overview / concepts
REST-API overview / conceptsREST-API overview / concepts
REST-API overview / concepts
 
Event Driven Architecture
Event Driven ArchitectureEvent Driven Architecture
Event Driven Architecture
 
Typescript: Beginner to Advanced
Typescript: Beginner to AdvancedTypescript: Beginner to Advanced
Typescript: Beginner to Advanced
 
Modern Java web applications with Spring Boot and Thymeleaf
Modern Java web applications with Spring Boot and ThymeleafModern Java web applications with Spring Boot and Thymeleaf
Modern Java web applications with Spring Boot and Thymeleaf
 
DDD with Behat
DDD with BehatDDD with Behat
DDD with Behat
 
Type script - advanced usage and practices
Type script  - advanced usage and practicesType script  - advanced usage and practices
Type script - advanced usage and practices
 
TypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation GuideTypeScript: Basic Features and Compilation Guide
TypeScript: Basic Features and Compilation Guide
 
JavaScript From Hell - CONFidence 2.0 2009
JavaScript From Hell - CONFidence 2.0 2009JavaScript From Hell - CONFidence 2.0 2009
JavaScript From Hell - CONFidence 2.0 2009
 
Getting started with typescript
Getting started with typescriptGetting started with typescript
Getting started with typescript
 
Java vs python
Java vs pythonJava vs python
Java vs python
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js Express
 
Consuming Restful APIs using Swagger v2.0
Consuming Restful APIs using Swagger v2.0Consuming Restful APIs using Swagger v2.0
Consuming Restful APIs using Swagger v2.0
 
Design applicatif avec symfony2
Design applicatif avec symfony2Design applicatif avec symfony2
Design applicatif avec symfony2
 
Java presentation
Java presentation Java presentation
Java presentation
 
Dictionary
DictionaryDictionary
Dictionary
 
Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle A...
Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle A...Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle A...
Goodbye Nightmare: Tips and Tricks for Creating Complex Layouts with Oracle A...
 
Spring Web Services: SOAP vs. REST
Spring Web Services: SOAP vs. RESTSpring Web Services: SOAP vs. REST
Spring Web Services: SOAP vs. REST
 
Interview preparation full_stack_java
Interview preparation full_stack_javaInterview preparation full_stack_java
Interview preparation full_stack_java
 
Oracle APEX Interactive Grid Essentials
Oracle APEX Interactive Grid EssentialsOracle APEX Interactive Grid Essentials
Oracle APEX Interactive Grid Essentials
 
Laravel Dusk
Laravel DuskLaravel Dusk
Laravel Dusk
 

Similar to How to implement Google One Tap Login in Reactjs?

Google external login setup in ASP (1).pdf
Google external login setup in ASP  (1).pdfGoogle external login setup in ASP  (1).pdf
Google external login setup in ASP (1).pdf
findandsolve .com
 

Similar to How to implement Google One Tap Login in Reactjs? (20)

Angular 11 google social login or sign in tutorial using angularx social-login
Angular 11 google social login or sign in tutorial using angularx social-loginAngular 11 google social login or sign in tutorial using angularx social-login
Angular 11 google social login or sign in tutorial using angularx social-login
 
How to implement sso using o auth in golang application
How to implement sso using o auth in golang applicationHow to implement sso using o auth in golang application
How to implement sso using o auth in golang application
 
Google external login setup in ASP (1).pdf
Google external login setup in ASP  (1).pdfGoogle external login setup in ASP  (1).pdf
Google external login setup in ASP (1).pdf
 
Fraudpointer - Google Apps integration
Fraudpointer  - Google Apps integrationFraudpointer  - Google Apps integration
Fraudpointer - Google Apps integration
 
OpenID Connect and Single Sign-On for Beginners
OpenID Connect and Single Sign-On for BeginnersOpenID Connect and Single Sign-On for Beginners
OpenID Connect and Single Sign-On for Beginners
 
How To: Use Google Search Ap Is On Your Blog
How To: Use Google Search Ap Is On Your BlogHow To: Use Google Search Ap Is On Your Blog
How To: Use Google Search Ap Is On Your Blog
 
Django Shop
Django ShopDjango Shop
Django Shop
 
Build your first rpa bot using IBM RPA automation
Build your first rpa bot using IBM RPA automationBuild your first rpa bot using IBM RPA automation
Build your first rpa bot using IBM RPA automation
 
MuleSoft Integration with WhatsApp | Mysore MuleSoft Meetup #1
MuleSoft Integration with WhatsApp | Mysore MuleSoft Meetup #1MuleSoft Integration with WhatsApp | Mysore MuleSoft Meetup #1
MuleSoft Integration with WhatsApp | Mysore MuleSoft Meetup #1
 
How to integrate a subscription form with WordPress using a free plugin?
How to integrate a subscription form with WordPress using a free plugin?How to integrate a subscription form with WordPress using a free plugin?
How to integrate a subscription form with WordPress using a free plugin?
 
Google Analytics Workshop 2013
Google Analytics Workshop 2013Google Analytics Workshop 2013
Google Analytics Workshop 2013
 
Introductution to social connect Magento extension
Introductution to social connect Magento extensionIntroductution to social connect Magento extension
Introductution to social connect Magento extension
 
LA2M Google Tools Presentation Apr 1st 09
LA2M Google Tools Presentation Apr 1st 09LA2M Google Tools Presentation Apr 1st 09
LA2M Google Tools Presentation Apr 1st 09
 
Earn $8,234.56 weekly from Google with CRACKD
Earn $8,234.56 weekly from Google with CRACKDEarn $8,234.56 weekly from Google with CRACKD
Earn $8,234.56 weekly from Google with CRACKD
 
Cleveland Meetup December 2022.pptx
Cleveland Meetup December 2022.pptxCleveland Meetup December 2022.pptx
Cleveland Meetup December 2022.pptx
 
Google Analytics Questions Answer Prepration
Google Analytics Questions Answer PreprationGoogle Analytics Questions Answer Prepration
Google Analytics Questions Answer Prepration
 
Social Login Userguide
Social Login UserguideSocial Login Userguide
Social Login Userguide
 
Social login magento extension
Social login magento extensionSocial login magento extension
Social login magento extension
 
AI Platform Creator Review - DFY Al App
AI Platform Creator Review -  DFY Al AppAI Platform Creator Review -  DFY Al App
AI Platform Creator Review - DFY Al App
 
WordPress + Office 365 | Quick Installation Guide v9.6
WordPress + Office 365 | Quick Installation Guide v9.6WordPress + Office 365 | Quick Installation Guide v9.6
WordPress + Office 365 | Quick Installation Guide v9.6
 

Recently uploaded

Recently uploaded (20)

Easier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties ReimaginedEasier, Faster, and More Powerful – Notes Document Properties Reimagined
Easier, Faster, and More Powerful – Notes Document Properties Reimagined
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 

How to implement Google One Tap Login in Reactjs?

  • 1. One Tap Google Login with ReactJs A guide by Sufalam Technologies Pvt Ltd Pradip Vadher Sr. Reactjs Developer www.sufalamtech.com
  • 2. Why to choose One Tap Google Login? ● Sign-in with Google One Tap uses secure tokens, rather than login credentials, to sign users to the web application ● An easy sign-in process is meant to help users reduce the pressure of picking convenience over security when deciding on yet another password for a web app www.sufalamtech.com
  • 3. Why to choose One Tap Google Login? ● Users can sign in using just one tap, without having to remember their credentials or create a password ● Easy flow increased the sign-in with existing user and sign-up for new users www.sufalamtech.com
  • 4. Why to choose One Tap Google Login? ● Users can sign in or sign up anywhere in the web application, It also works after session expired ● Manual sign-up or switching accounts occur only after the user has first signed out of your site. www.sufalamtech.com
  • 5. Why to choose One Tap Google Login? ● One Tap Google Login also works with “Sign-in with Google” Button www.sufalamtech.com
  • 6. How to implements One Tap in ReactJs? www.sufalamtech.com
  • 7. Implement One Tap Login Step 1 Get Google API Client Id Step 2 Load the One-tap Google library Step 3 Initialize One tap to display Sign in Popup www.sufalamtech.com
  • 8. 1. Get Your Google API Client Id From Google Console To use Google’s one-tap sign-in flows, you need to set up your Google API client ID. If you don’t have Google Client Id then you need to create a new one. Use the below details to create a new client id. https://console.cloud.google.com/apis/credentials www.sufalamtech.com
  • 10. 2. Load Google Javascript Client Library The JavaScript client library for Sign In With Google and Google One Tap is designed to be compatible with most common browsers and platforms. <script src="https://accounts.google.com/gsi/client" async defer /> Due to security risks the JavaScript client library is only supported on the latest two versions of each browser www.sufalamtech.com
  • 11. 3. Initialize One tap to display Sign in Popup We have to initialize the client id to the google account script that loaded in system that we checked in the last step. After that we have to use prompt method to display the popup of one tap google login www.sufalamtech.com
  • 12. 3. Initialize One tap to display Sign in Popup www.sufalamtech.com
  • 14. Browser and platform combinations www.sufalamtech.com
  • 16. 1. Load the Javascript Client Library www.sufalamtech.com
  • 18. 2. Add Callback method to google api initialize block www.sufalamtech.com
  • 20. 3. Add Decode Method to find the user details from the callback response www.sufalamtech.com
  • 24. Browser Output Without Existing Google Login www.sufalamtech.com
  • 26. Security Concerns While Implementing One Tap www.sufalamtech.com
  • 27. 1. Google One Tap can only be displayed in HTTPS domains. www.sufalamtech.com 2. Due to security risks the JavaScript client library is only supported on the latest two versions of each browser.
  • 28. 3.Do not cover Google One Tap by any other content. www.sufalamtech.com 4. One Tap Google Login is NOT configured to work on Private Window.
  • 29. Checkout complete example on Git Hub https://github.com/Sufalam- Technologies/one_tap_google_login www.sufalamtech.com
  • 30. Thank You Follow Us On www.sufalamtech.com