{"id":1,"date":"2024-03-16T11:19:53","date_gmt":"2024-03-16T11:19:53","guid":{"rendered":"https:\/\/devdojo.co.in\/?p=1"},"modified":"2024-03-25T15:59:55","modified_gmt":"2024-03-25T15:59:55","slug":"firebase-authentication-with-reactjs","status":"publish","type":"post","link":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/","title":{"rendered":"Firebase Authentication with ReactJS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Authentication is the process that many organizations are used to confirm that only the right people, services, and apps with the right permissions can get organizational resources.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s an important part of cybersecurity because a hacker or an unauthorized person&#8217;s number one priority is to get the unauthorized access to systems. They do this by stealing the credentials (username and password) of authorized users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">User authentication is a crucial aspect of any web application. Ensuring secure and seamless access for your users can be challenging, but with the right tools, it becomes much more manageable. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step-by-Step Guide: Firebase Authentication with Google, Facebook, GitHub, and Phone in ReactJS.<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Introduction<\/strong>:<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">In today&#8217;s digital landscape, user authentication is a crucial aspect of web development, ensuring that only authorized users can access certain features or data within an application. However, implementing authentication systems from scratch can be complex and time-consuming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That&#8217;s where Firebase Authentication comes in handy. Firebase Authentication provides a simple and secure way to authenticate users in web and mobile applications, allowing developers to focus on building great user experiences without worrying about the intricacies of authentication.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-medium-font-size wp-block-paragraph\"><strong><em>Firebase, a comprehensive platform by Google, offers robust authentication services that can be seamlessly integrated into your Web applications.<\/em><\/strong><\/p>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog post, we&#8217;ll explore how to implement Firebase authentication using popular social login providers like Google, Facebook, GitHub, and even phone authentication, all within a ReactJS environment.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Why Firebase Authentication?<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Firebase Authentication provides a simple and secure way to authenticate users, allowing you to focus on building great user experiences without worrying about the complexities of authentication flows and security protocols. With Firebase, you can easily integrate popular social login providers, implement custom authentication methods, and manage user accounts with ease.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Prerequisites:<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Before we begin, make sure you have the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Node.js and npm installed on your system.<\/li>\n\n\n\n<li>Basic knowledge of ReactJS.<\/li>\n\n\n\n<li>A Firebase project created in the Firebase console (https:\/\/console.firebase.google.com\/).<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Step 1: Set up a ReactJS Project<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">If you haven&#8217;t already created a ReactJS project, you can set one up using Create React App. Open your terminal and run the following commands:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2d333d;color:#9eadbd\">Bash<\/span><span role=\"button\" tabindex=\"0\" data-code=\"npx create-react-app firebase-auth-react\n\ncd firebase-auth-react\" style=\"color:#adbac7;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark-dimmed\" style=\"background-color: #22272e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F69D50\">npx<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">create-react-app<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">firebase-auth-react<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6CB6FF\">cd<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">firebase-auth-react<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Step 2: Install Firebase<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Next, install the Firebase SDK and Firebase Authentication module in your ReactJS project:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2d333d;color:#9eadbd\">Bash<\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm install firebase\" style=\"color:#adbac7;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark-dimmed\" style=\"background-color: #22272e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F69D50\">npm<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">install<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">firebase<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Step 3: Configure Firebase in Your Project<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Head to the Firebase console (https:\/\/console.firebase.google.com\/) and create a new project. Once your project is created, click on &#8220;Add app&#8221; and select the web platform (&lt;\/&gt;). Follow the instructions to register your app and copy the Firebase configuration object.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In your ReactJS project, create a new file named firebase.js in the src directory. Paste the Firebase configuration object into this file:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Monaspace-Neon.woff\" style=\"font-size:clamp(12px, .75rem, 18px);font-family:Code-Pro-Monaspace-Neon,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(16px, 1rem, 24px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2d333d;color:#9eadbd\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ src\/firebase.js\n\n\/\/ Import the functions you need from the SDKs you need\n\nimport { initializeApp } from &quot;firebase\/app&quot;;\n\nimport { getAuth, signInWithPopup, GoogleAuthProvider } from &quot;firebase\/auth&quot;;\n\nconst firebaseConfig = {\n\n\u00a0\u00a0apiKey: &quot;YOUR_API_KEY&quot;,\n\n\u00a0\u00a0authDomain: &quot;YOUR_AUTH_DOMAIN&quot;,\n\n\u00a0\u00a0projectId: &quot;YOUR_PROJECT_ID&quot;,\n\n\u00a0\u00a0storageBucket: &quot;YOUR_STORAGE_BUCKET&quot;,\n\n\u00a0\u00a0messagingSenderId: &quot;YOUR_MESSAGING_SENDER_ID&quot;,\n\n\u00a0\u00a0appId: &quot;YOUR_APP_ID&quot;\n\n};\n\n\/\/ Initialize Firebase\n\nconst app = initializeApp(firebaseConfig);\n\n\/\/ Initialize Firebase Auth provider\n\nconst provider = new GoogleAuthProvider();\n\n\/\/ whenever a user interacts with the provider, we force them to select an account\n\nprovider.setCustomParameters({\u00a0\u00a0\u00a0\n\n\u00a0\u00a0\u00a0\u00a0prompt : &quot;select_account &quot;\n\n});\n\nexport const auth = getAuth();\n\nexport const signInWithGooglePopup = () =&gt; signInWithPopup(auth, provider);\" style=\"color:#adbac7;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark-dimmed\" style=\"background-color: #22272e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #768390\">\/\/ src\/firebase.js<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #768390\">\/\/ Import the functions you need from the SDKs you need<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">import<\/span><span style=\"color: #ADBAC7\"> { initializeApp } <\/span><span style=\"color: #F47067\">from<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">&quot;firebase\/app&quot;<\/span><span style=\"color: #ADBAC7\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">import<\/span><span style=\"color: #ADBAC7\"> { getAuth, signInWithPopup, GoogleAuthProvider } <\/span><span style=\"color: #F47067\">from<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">&quot;firebase\/auth&quot;<\/span><span style=\"color: #ADBAC7\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #6CB6FF\">firebaseConfig<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0apiKey: <\/span><span style=\"color: #96D0FF\">&quot;YOUR_API_KEY&quot;<\/span><span style=\"color: #ADBAC7\">,<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0authDomain: <\/span><span style=\"color: #96D0FF\">&quot;YOUR_AUTH_DOMAIN&quot;<\/span><span style=\"color: #ADBAC7\">,<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0projectId: <\/span><span style=\"color: #96D0FF\">&quot;YOUR_PROJECT_ID&quot;<\/span><span style=\"color: #ADBAC7\">,<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0storageBucket: <\/span><span style=\"color: #96D0FF\">&quot;YOUR_STORAGE_BUCKET&quot;<\/span><span style=\"color: #ADBAC7\">,<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0messagingSenderId: <\/span><span style=\"color: #96D0FF\">&quot;YOUR_MESSAGING_SENDER_ID&quot;<\/span><span style=\"color: #ADBAC7\">,<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0appId: <\/span><span style=\"color: #96D0FF\">&quot;YOUR_APP_ID&quot;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #768390\">\/\/ Initialize Firebase<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #6CB6FF\">app<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">initializeApp<\/span><span style=\"color: #ADBAC7\">(firebaseConfig);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #768390\">\/\/ Initialize Firebase Auth provider<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #6CB6FF\">provider<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">new<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">GoogleAuthProvider<\/span><span style=\"color: #ADBAC7\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #768390\">\/\/ whenever a user interacts with the provider, we force them to select an account<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">provider.<\/span><span style=\"color: #DCBDFB\">setCustomParameters<\/span><span style=\"color: #ADBAC7\">({\u00a0\u00a0\u00a0<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0prompt : <\/span><span style=\"color: #96D0FF\">&quot;select_account &quot;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">});<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">export<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #6CB6FF\">auth<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">getAuth<\/span><span style=\"color: #ADBAC7\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">export<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">signInWithGooglePopup<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> () <\/span><span style=\"color: #F47067\">=&gt;<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">signInWithPopup<\/span><span style=\"color: #ADBAC7\">(auth, provider);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Replace the placeholder values with your actual Firebase project configuration.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Step 4: Set Up Firebase Authentication Providers<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let&#8217;s enable the authentication providers we want to use in our Firebase project.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Google Authentication:<\/strong> Firebase offers built-in support for Google authentication out of the box. To enable Google authentication in your app, you&#8217;ll need to configure Firebase with your Google OAuth credentials and enable the Google sign-in provider in the Firebase console. Once configured, you can use Firebase&#8217;s signInWithPopup method to initiate the Google authentication flow in your ReactJS app.\n<ul class=\"wp-block-list\">\n<li>In the Firebase console, navigate to Authentication &gt; Sign-in method.<\/li>\n\n\n\n<li>Enable Google as a sign-in provider and follow the setup instructions.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Facebook Authentication:<\/strong> Similar to Google authentication, Firebase supports Facebook authentication as well. Configure Firebase with your Facebook OAuth credentials and enable the Facebook sign-in provider in the Firebase console. Then, use Firebase&#8217;s signInWithPopup method to implement Facebook authentication in your ReactJS app.\n<ul class=\"wp-block-list\">\n<li>Enable Facebook as a sign-in provider and follow the setup instructions.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>GitHub Authentication:<\/strong> GitHub authentication can also be integrated seamlessly with Firebase. Configure Firebase with your GitHub OAuth credentials and enable the GitHub sign-in provider in the Firebase console. Utilize Firebase&#8217;s signInWithPopup method to enable GitHub authentication in your ReactJS app.\n<ul class=\"wp-block-list\">\n<li>Enable GitHub as a sign-in provider and follow the setup instructions.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Phone Authentication:<\/strong> Firebase provides phone authentication as an alternative to social logins. With phone authentication, users can sign in to your app using their phone numbers, receiving a verification code via SMS. Configure Firebase with your reCAPTCHA credentials and enable phone authentication in the Firebase console. Then, use Firebase&#8217;s signInWithPhoneNumber method to implement phone authentication in your ReactJS app.\n<ul class=\"wp-block-list\">\n<li>Enable Phone as a sign-in provider and follow the setup instructions.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac0b2d33f7ec&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac0b2d33f7ec\" class=\"wp-block-image size-full is-resized is-style-default wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1156\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/auth_providers-scaled.webp\" alt=\"\" class=\"wp-image-61\" style=\"width:832px;height:auto\" srcset=\"https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/auth_providers-scaled.webp 2560w, https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/auth_providers-300x136.webp 300w, https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/auth_providers-1024x463.webp 1024w, https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/auth_providers-768x347.webp 768w, https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/auth_providers-1536x694.webp 1536w, https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/auth_providers-2048x925.webp 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Step 5: Implement Firebase Authentication in ReactJS<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">In your ReactJS application, you can now implement Firebase Authentication using the Firebase SDK. Let&#8217;s create a simple authentication component for demonstration.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Monaspace-Neon.woff\" style=\"font-size:clamp(12px, .75rem, 18px);font-family:Code-Pro-Monaspace-Neon,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(16px, 1rem, 24px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2d333d;color:#9eadbd\">JavaScript<\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ src\/components\/Auth.js\n\nimport React from 'react';\n\nimport firebase from '..\/firebase';\n\nconst Auth = () =&gt; {\n\n\u00a0\u00a0\/\/ Function to handle sign-in with Google and Github using popup auth methods.\n\n\u00a0\u00a0\/\/ Replace the console.log statements with your own code to handle the sign-in.\n\n\u00a0\u00a0\/\/ For example, you can redirect the user to a different page after successful sign-in.\n\n\u00a0\u00a0\/\/ You can also handle errors and display appropriate messages to the user.\n\n\u00a0\u00a0\/\/ You can also use the response object to access the user's profile information.\n\n\u00a0\u00a0\/\/ For example, you can use the response object to display the user's name or avatar image.\n\n\u00a0\u00a0\/\/ Example usage:\n\n\u00a0\u00a0\/\/ const response = await signInWithGooglePopup();\n\n\u00a0\u00a0\/\/ console.log(&quot;google signin response: &quot;, response);\n\n\u00a0\u00a0\/\/ Replace the console.log statements with your own code to handle the sign-in.\n\n\u00a0\u00a0const handleGoogleSignIn = async () =&gt; {\n\n\u00a0\u00a0\u00a0\u00a0try {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const respose = await signInWithGooglePopup();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(&quot;google signin response: &quot;, respose);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Handle successful sign-in\n\n\u00a0\u00a0\u00a0\u00a0} catch (error) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.error(error.message);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0};\n\n\u00a0\u00a0const handleGithubSignIn = async () =&gt; {\n\n\u00a0\u00a0\u00a0\u00a0try {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const response = await signInWithGithubPopup();\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(&quot;github signin response: &quot;, response);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Handle successful sign-in\n\n\u00a0\u00a0\u00a0\u00a0} catch (error) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.error(error.message);\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0};\n\n\u00a0\u00a0\/\/ Similar functions for other providers (facebook and etc.)\n\n\u00a0\u00a0return (\n\n\u00a0\u00a0\u00a0\u00a0&lt;&gt;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div&gt;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2&gt;Sign In&lt;\/h2&gt;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={handleGoogleSignIn}&gt;Sign in with Google&lt;\/button&gt;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;button onClick={handleGithubSignIn}&gt;Sign in with Github&lt;\/button&gt;\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\/* Add buttons for other authentication providers *\/}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\n\u00a0\u00a0\u00a0\u00a0&lt;\/&gt;\n\n\u00a0\u00a0);\n\n};\n\nexport default Auth;\" style=\"color:#adbac7;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark-dimmed\" style=\"background-color: #22272e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #768390\">\/\/ src\/components\/Auth.js<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">import<\/span><span style=\"color: #ADBAC7\"> React <\/span><span style=\"color: #F47067\">from<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">&#39;react&#39;<\/span><span style=\"color: #ADBAC7\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">import<\/span><span style=\"color: #ADBAC7\"> firebase <\/span><span style=\"color: #F47067\">from<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">&#39;..\/firebase&#39;<\/span><span style=\"color: #ADBAC7\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">Auth<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> () <\/span><span style=\"color: #F47067\">=&gt;<\/span><span style=\"color: #ADBAC7\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ Function to handle sign-in with Google and Github using popup auth methods.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ Replace the console.log statements with your own code to handle the sign-in.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ For example, you can redirect the user to a different page after successful sign-in.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ You can also handle errors and display appropriate messages to the user.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ You can also use the response object to access the user&#39;s profile information.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ For example, you can use the response object to display the user&#39;s name or avatar image.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ Example usage:<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ const response = await signInWithGooglePopup();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ console.log(&quot;google signin response: &quot;, response);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ Replace the console.log statements with your own code to handle the sign-in.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">handleGoogleSignIn<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">async<\/span><span style=\"color: #ADBAC7\"> () <\/span><span style=\"color: #F47067\">=&gt;<\/span><span style=\"color: #ADBAC7\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #F47067\">try<\/span><span style=\"color: #ADBAC7\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #6CB6FF\">respose<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">await<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">signInWithGooglePopup<\/span><span style=\"color: #ADBAC7\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.<\/span><span style=\"color: #DCBDFB\">log<\/span><span style=\"color: #ADBAC7\">(<\/span><span style=\"color: #96D0FF\">&quot;google signin response: &quot;<\/span><span style=\"color: #ADBAC7\">, respose);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ Handle successful sign-in<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0} <\/span><span style=\"color: #F47067\">catch<\/span><span style=\"color: #ADBAC7\"> (error) {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.<\/span><span style=\"color: #DCBDFB\">error<\/span><span style=\"color: #ADBAC7\">(error.message);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">handleGithubSignIn<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">async<\/span><span style=\"color: #ADBAC7\"> () <\/span><span style=\"color: #F47067\">=&gt;<\/span><span style=\"color: #ADBAC7\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #F47067\">try<\/span><span style=\"color: #ADBAC7\"> {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #F47067\">const<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #6CB6FF\">response<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">=<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #F47067\">await<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #DCBDFB\">signInWithGithubPopup<\/span><span style=\"color: #ADBAC7\">();<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.<\/span><span style=\"color: #DCBDFB\">log<\/span><span style=\"color: #ADBAC7\">(<\/span><span style=\"color: #96D0FF\">&quot;github signin response: &quot;<\/span><span style=\"color: #ADBAC7\">, response);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ Handle successful sign-in<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0} <\/span><span style=\"color: #F47067\">catch<\/span><span style=\"color: #ADBAC7\"> (error) {<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.<\/span><span style=\"color: #DCBDFB\">error<\/span><span style=\"color: #ADBAC7\">(error.message);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #768390\">\/\/ Similar functions for other providers (facebook and etc.)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0<\/span><span style=\"color: #F47067\">return<\/span><span style=\"color: #ADBAC7\"> (<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0&lt;&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"color: #8DDB8C\">div<\/span><span style=\"color: #ADBAC7\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"color: #8DDB8C\">h2<\/span><span style=\"color: #ADBAC7\">&gt;Sign In&lt;\/<\/span><span style=\"color: #8DDB8C\">h2<\/span><span style=\"color: #ADBAC7\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"color: #8DDB8C\">button<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #6CB6FF\">onClick<\/span><span style=\"color: #F47067\">={<\/span><span style=\"color: #ADBAC7\">handleGoogleSignIn<\/span><span style=\"color: #F47067\">}<\/span><span style=\"color: #ADBAC7\">&gt;Sign in with Google&lt;\/<\/span><span style=\"color: #8DDB8C\">button<\/span><span style=\"color: #ADBAC7\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;<\/span><span style=\"color: #8DDB8C\">button<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #6CB6FF\">onClick<\/span><span style=\"color: #F47067\">={<\/span><span style=\"color: #ADBAC7\">handleGithubSignIn<\/span><span style=\"color: #F47067\">}<\/span><span style=\"color: #ADBAC7\">&gt;Sign in with Github&lt;\/<\/span><span style=\"color: #8DDB8C\">button<\/span><span style=\"color: #ADBAC7\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span style=\"color: #F47067\">{<\/span><span style=\"color: #768390\">\/* Add buttons for other authentication providers *\/<\/span><span style=\"color: #F47067\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/<\/span><span style=\"color: #8DDB8C\">div<\/span><span style=\"color: #ADBAC7\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0\u00a0\u00a0&lt;\/&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">\u00a0\u00a0);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ADBAC7\">};<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F47067\">export<\/span><span style=\"color: #F69D50\"> <\/span><span style=\"color: #F47067\">default<\/span><span style=\"color: #F69D50\"> <\/span><span style=\"color: #ADBAC7\">Auth;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In this post I have implemented the Google Authentication and Github Authentication. Similarly you can implement the functions for other providers.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Step 6: Test Authentication<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">You can now test your authentication setup by running your ReactJS application and attempting to sign in using the enabled providers.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-Monaspace-Neon.woff\" style=\"font-size:clamp(12px, .75rem, 18px);font-family:Code-Pro-Monaspace-Neon,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(16px, 1rem, 24px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#2d333d;color:#9eadbd\">Bash<\/span><span role=\"button\" tabindex=\"0\" data-code=\"npm start\" style=\"color:#adbac7;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark-dimmed\" style=\"background-color: #22272e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F69D50\">npm<\/span><span style=\"color: #ADBAC7\"> <\/span><span style=\"color: #96D0FF\">start<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This command will run your application on<a href=\"http:\/\/localhost:3000\"> http:\/\/localhost:3000<\/a>.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6ac0b2d340012&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6ac0b2d340012\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"570\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/login_page-1-1024x570.webp\" alt=\"\" class=\"wp-image-62\" srcset=\"https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/login_page-1-1024x570.webp 1024w, https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/login_page-1-300x167.webp 300w, https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/login_page-1-768x428.webp 768w, https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/login_page-1-1536x855.webp 1536w, https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/login_page-1-2048x1140.webp 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<div style=\"height:37px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Conclusion:<\/strong><\/h5>\n\n\n\n<p class=\"wp-block-paragraph\">Congratulations! we&#8217;ve explored how to implement Firebase authentication using Google, Facebook, GitHub, and phone authentication in a ReactJS application. Firebase&#8217;s comprehensive authentication services make it easy to provide secure and seamless access for your users, regardless of their preferred authentication method. By leveraging Firebase authentication, you can streamline the authentication process in your ReactJS apps and focus on delivering exceptional user experiences.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Firebase Authentication offers a wide range of features, including email\/password authentication, social sign-in, multi-factor authentication, and more, enabling you to tailor the authentication experience to your application&#8217;s specific requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So why wait? Get started with Firebase Authentication in your ReactJS project today and take your application to the next level of user authentication and security. Happy coding!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Start integrating Firebase authentication into your ReactJS applications today and empower your users with secure and convenient access to your app&#8217;s features. Happy coding!This tutorial is also available on<a href=\"https:\/\/github.com\/Lokendra2500\/firebase-authentication-reactjs.git\" target=\"_blank\" rel=\"noreferrer noopener\"> GitHub<\/a> for reference.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Authentication is the process that many organizations are used to confirm that only the right people, services, and apps with the right permissions can get organizational resources. It&#8217;s an important part of cybersecurity because a hacker or an unauthorized person&#8217;s number one priority is to get the unauthorized access to systems. They do this by stealing the credentials (username and password) of authorized users. User authentication is a crucial aspect&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":58,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"footnotes":""},"categories":[11,4],"tags":[16,17,19,18,15],"class_list":["post-1","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-firebase","category-reactjs","tag-firebase","tag-firebase-authentication","tag-github-authentication","tag-google-authentication","tag-reactjs","post_format-post-format-image"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.2.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Firebase social login using Google, Facebook, Github and Phone in ReactJS.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Lokendra\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"DevDojo - Empowering Developers\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Firebase Authentication with ReactJS - DevDojo\" \/>\n\t\t<meta property=\"og:description\" content=\"Firebase social login using Google, Facebook, Github and Phone in ReactJS.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2024-03-16T11:19:53+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-03-25T15:59:55+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Firebase Authentication with ReactJS - DevDojo\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Firebase social login using Google, Facebook, Github and Phone in ReactJS.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#blogposting\",\"name\":\"Firebase Authentication with ReactJS - DevDojo\",\"headline\":\"Firebase Authentication with ReactJS\",\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/React-Firebase-authentication.webp\",\"width\":2240,\"height\":1260},\"datePublished\":\"2024-03-16T11:19:53+00:00\",\"dateModified\":\"2024-03-25T15:59:55+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#webpage\"},\"articleSection\":\"Firebase, ReactJS, Firebase, Firebase Authentication, Github Authentication, Google Authentication, ReactJS, Image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"name\":\"ReactJS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"position\":3,\"name\":\"ReactJS\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#listItem\",\"name\":\"Firebase Authentication with ReactJS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#listItem\",\"position\":4,\"name\":\"Firebase Authentication with ReactJS\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"name\":\"ReactJS\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/\",\"name\":\"Lokendra\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Lokendra\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#webpage\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/\",\"name\":\"Firebase Authentication with ReactJS - DevDojo\",\"description\":\"Firebase social login using Google, Facebook, Github and Phone in ReactJS.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/React-Firebase-authentication.webp\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#mainImage\",\"width\":2240,\"height\":1260},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2024\\\/03\\\/16\\\/firebase-authentication-with-reactjs\\\/#mainImage\"},\"datePublished\":\"2024-03-16T11:19:53+00:00\",\"dateModified\":\"2024-03-25T15:59:55+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Firebase Authentication with ReactJS - DevDojo","description":"Firebase social login using Google, Facebook, Github and Phone in ReactJS.","canonical_url":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#blogposting","name":"Firebase Authentication with ReactJS - DevDojo","headline":"Firebase Authentication with ReactJS","author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/React-Firebase-authentication.webp","width":2240,"height":1260},"datePublished":"2024-03-16T11:19:53+00:00","dateModified":"2024-03-25T15:59:55+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#webpage"},"isPartOf":{"@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#webpage"},"articleSection":"Firebase, ReactJS, Firebase, Firebase Authentication, Github Authentication, Google Authentication, ReactJS, Image"},{"@type":"BreadcrumbList","@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","position":1,"name":"Home","item":"https:\/\/devdojo.co.in\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","position":2,"name":"Frontend","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","name":"ReactJS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","position":3,"name":"ReactJS","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#listItem","name":"Firebase Authentication with ReactJS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#listItem","position":4,"name":"Firebase Authentication with ReactJS","previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","name":"ReactJS"}}]},{"@type":"Organization","@id":"https:\/\/devdojo.co.in\/#organization","name":"DevDojo","description":"Empowering Developers","url":"https:\/\/devdojo.co.in\/"},{"@type":"Person","@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author","url":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/","name":"Lokendra","image":{"@type":"ImageObject","@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g","width":96,"height":96,"caption":"Lokendra"}},{"@type":"WebPage","@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#webpage","url":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/","name":"Firebase Authentication with ReactJS - DevDojo","description":"Firebase social login using Google, Facebook, Github and Phone in ReactJS.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/devdojo.co.in\/#website"},"breadcrumb":{"@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#breadcrumblist"},"author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"creator":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2024\/03\/React-Firebase-authentication.webp","@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#mainImage","width":2240,"height":1260},"primaryImageOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/#mainImage"},"datePublished":"2024-03-16T11:19:53+00:00","dateModified":"2024-03-25T15:59:55+00:00"},{"@type":"WebSite","@id":"https:\/\/devdojo.co.in\/#website","url":"https:\/\/devdojo.co.in\/","name":"DevDojo","description":"Empowering Developers","inLanguage":"en-US","publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"}}]},"og:locale":"en_US","og:site_name":"DevDojo - Empowering Developers","og:type":"article","og:title":"Firebase Authentication with ReactJS - DevDojo","og:description":"Firebase social login using Google, Facebook, Github and Phone in ReactJS.","og:url":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/","article:published_time":"2024-03-16T11:19:53+00:00","article:modified_time":"2024-03-25T15:59:55+00:00","twitter:card":"summary_large_image","twitter:title":"Firebase Authentication with ReactJS - DevDojo","twitter:description":"Firebase social login using Google, Facebook, Github and Phone in ReactJS."},"aioseo_meta_data":{"post_id":"1","title":null,"description":"Firebase social login using Google, Facebook, Github and Phone in ReactJS.","keywords":[],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2024-03-16 11:49:52","updated":"2025-08-18 13:19:39","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/\" title=\"Frontend\">Frontend<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/\" title=\"ReactJS\">ReactJS<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tFirebase Authentication with ReactJS\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/devdojo.co.in\/"},{"label":"Frontend","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/"},{"label":"ReactJS","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/"},{"label":"Firebase Authentication with ReactJS","link":"https:\/\/devdojo.co.in\/index.php\/2024\/03\/16\/firebase-authentication-with-reactjs\/"}],"_links":{"self":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":5,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":66,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/1\/revisions\/66"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media\/58"}],"wp:attachment":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}