{"id":2367,"date":"2022-01-26T13:09:23","date_gmt":"2022-01-26T13:09:23","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2367"},"modified":"2022-01-26T13:09:23","modified_gmt":"2022-01-26T13:09:23","slug":"setup-google-github-and-facebook-authentication-in-your-react-app","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2367","title":{"rendered":"Setup Google, Github and Facebook Authentication in your React App"},"content":{"rendered":"\n<p>This is Savio here. I&#8217;m young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Today, I&#8217;ll show you the easiest and the fastest way to set up Google, Github and Facebook Authentication in your React App ?. So, be with me! Let&#8217;s code something amazing!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 id=\"table-of-contents\">Table of Contents<\/h2>\n\n\n\n<ul><li><a href=\"https:\/\/devdojo.com\/savio\/setup-google-github-and-facebook-authentication-in-your-react-app#create-react-app\">Create React App<\/a><\/li><li><a href=\"https:\/\/devdojo.com\/savio\/setup-google-github-and-facebook-authentication-in-your-react-app#setup-firebase\">Setup Firebase<\/a><\/li><li><a href=\"https:\/\/devdojo.com\/savio\/setup-google-github-and-facebook-authentication-in-your-react-app#google-authentication\">Google Authentication<\/a><\/li><li><a href=\"https:\/\/devdojo.com\/savio\/setup-google-github-and-facebook-authentication-in-your-react-app#facebook-authentication\">Facebook Authentication<\/a><\/li><li><a href=\"https:\/\/devdojo.com\/savio\/setup-google-github-and-facebook-authentication-in-your-react-app#github-authentication\">Github Authentication<\/a><\/li><li><a href=\"https:\/\/devdojo.com\/savio\/setup-google-github-and-facebook-authentication-in-your-react-app#testing-authentication\">Testing Authentication<\/a><\/li><\/ul>\n\n\n\n<h3 id=\"create-react-app\">Create React App<\/h3>\n\n\n\n<p>First of all, we first have to create a react app. You know it!<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app firebase-auth\n<\/code><\/pre>\n\n\n\n<p>This will create you a normal react app. You can start the server by <code>npm start<\/code>. Let&#8217;s add some basic styles to <code>App.css<\/code> which will be helpful later. Here goes the code ?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\n* {\n  margin: 0;\n  padding: 0;\n}\n.App {\n  height: 100vh;\n  width: 100%;\n  background: #4954ca;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\nbutton {\n  padding: 13px 17px;\n  margin: 3px;\n  border-radius: 5px;\n  border: 3px solid #323381;\n  font-size: 19px;\n  cursor: pointer;\n  background: #fff;\n  color: #323381;\n}\n<\/code><\/pre>\n\n\n\n<p>It will also good if you remove unwanted files from the <code>src\/<\/code> folder making your app clean to use! That&#8217;s all, let&#8217;s just jump on to the next and the most important part.<\/p>\n\n\n\n<h3 id=\"setup-firebase\">Setup Firebase<\/h3>\n\n\n\n<p>Here come the most important and the most amazing part, I&#8217;m sure you&#8217;re gonna learn a lot! <img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620912767899\/qE54FgAoY.png\" alt=\"screely-1620912764730.png\"><\/p>\n\n\n\n<p>First of all, got to you <a href=\"https:\/\/console.firebase.google.com\/\">firebase console<\/a>, Create a new project. After creating a project, click on <strong>Web<\/strong> button to register your web app.<\/p>\n\n\n\n<p>Now, go to <strong>Project Settings &gt; Config<\/strong> to get your <code>firebaseConfig<\/code>. Make sure to copy that, you&#8217;ll need later.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620913331508\/aNEOYc3Nm.png\" alt=\"screely-1620913325766.png\"\/><\/figure>\n\n\n\n<p><a href=\"https:\/\/devdojo.com\/tails\" target=\"_blank\" rel=\"noreferrer noopener\"><img src=\"https:\/\/cdn.devdojo.com\/images\/january2021\/970x901.jpg\"> Checkout our latest product &#8211; the ultimate tailwindcss page creator ?<\/a><\/p>\n\n\n\n<p>Now go to <strong>Authentication<\/strong> tab and enable it. We&#8217;ll do the rest in the next part. That&#8217;s all what we need to do now. Lets just jump to writing code.<\/p>\n\n\n\n<p><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620912881968\/0LS-uwpBt.png\" alt=\"screely-1620912876544.png\"> First, lets install our only one npm module &#8211; <a href=\"https:\/\/www.npmjs.com\/package\/firebase\">Firebase<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install firebase\n<\/code><\/pre>\n\n\n\n<p>After, installing firebase, let&#8217;s set up our folder structure. We need to create 2 new folders, <code>service<\/code> and <code>config<\/code>. Here goes the folder structure ?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>src\/\n\u251c\u2500\u2500 config\/\n       \u251c\u2500\u2500 authMethods.js\n       \u2514\u2500\u2500 firebase-config.js\n\u251c\u2500\u2500 service\/\n       \u2514\u2500\u2500 auth.js\n\u251c\u2500\u2500 App.css\n\u251c\u2500\u2500 App.js\n\u2514\u2500\u2500 index.js\n<\/code><\/pre>\n\n\n\n<p>We can now jump straight onto <code>config\/firebase-config.js<\/code>, here we can paste our <code>firebaseConfig<\/code> we got earlier. Here goes the code ?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import firebase from \"firebase\";\n\nconst firebaseConfig = {\n  apiKey: \"AIzaSyArMcPSmKPHef7JkoCMC_sa0pwIAZUlciA\",\n  authDomain: \"todo-bysavio.firebaseapp.com\",\n  projectId: \"todo-bysavio\",\n  storageBucket: \"todo-bysavio.appspot.com\",\n  messagingSenderId: \"190049626154\",\n  appId: \"1:190049626154:web:51016ff378a1e80c1ffb53\",\n  measurementId: \"G-5HNJBKNDK9\",\n};\n\nfirebase.initializeApp(firebaseConfig);\nfirebase.analytics();\n\nexport default firebase;\n<\/code><\/pre>\n\n\n\n<p>Now, lets create our <code>Auth Methods<\/code> for that, we can jump to <code>config\/authMethods.js<\/code>. In this blog, we are using 3 auth methods, <strong>Google<\/strong>, <strong>Facebook<\/strong> and <strong>Github<\/strong>. So, here is the code for it ?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import firebase from \".\/firebase-config\";\n\nexport const facebookProvider = new firebase.auth.FacebookAuthProvider();\nexport const githubProvider = new firebase.auth.GithubAuthProvider();\nexport const googleProvider = new firebase.auth.GoogleAuthProvider();\n<\/code><\/pre>\n\n\n\n<p>Yeah, that&#8217;s all for the <code>config<\/code>, let&#8217;s just jump to our next folder, <code>service<\/code>. Inside <code>service\/auth.js<\/code>, we&#8217;re gonna just create a function that takes <code>provider<\/code> as the parameter. It will also make our code clean and remove duplication of the same. Here is the code ?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import firebase from \"..\/config\/firebase-config\";\n\nconst socialMediaAuth = (provider) =&gt; {\n  firebase\n    .auth()\n    .signInWithPopup(provider)\n    .then((res) =&gt; {\n      return res.user;\n    })\n    .catch((err) =&gt; {\n      return err;\n    });\n};\n\nexport default socialMediaAuth;\n<\/code><\/pre>\n\n\n\n<p>Now, let&#8217;s jump to our <code>App.js<\/code>, It acts as our home component. It is pretty simple, it just renders our home page. In <code>App.js<\/code>, we are importing our 3 methods from <code>config\/authMethods<\/code>, we just created. Here are the three methods ?<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {\n  facebookProvider,\n  githubProvider,\n  googleProvider,\n} from \".\/config\/authMethods\";\n<\/code><\/pre>\n\n\n\n<h4 id=\"app-js\"><code>App.js<\/code><\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>import socialMediaAuth from \".\/service\/auth\";\nimport \".\/App.css\";\nimport {\n  facebookProvider,\n  githubProvider,\n  googleProvider,\n} from \".\/config\/authMethods\";\n\nfunction App() {\n  const handleOnClick = async (provider) =&gt; {\n    const res = await socialMediaAuth(provider);\n    console.log(res);\n  };\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;button onClick={() =&gt; handleOnClick(facebookProvider)}&gt;FaceBook&lt;\/button&gt;\n      &lt;button onClick={() =&gt; handleOnClick(githubProvider)}&gt;Github&lt;\/button&gt;\n      &lt;button onClick={() =&gt; handleOnClick(googleProvider)}&gt;Google&lt;\/button&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>Now, that&#8217;s it in the code part. We can say the code part is completed ?. We have a lot to set up to make everything work. So, let&#8217;s now jump to setup our Google authentication.<\/p>\n\n\n\n<h3 id=\"google-authentication\">Google Authentication<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620913387585\/ZJ0ELbzp2.png\" alt=\"screely-1620913383399.png\"\/><\/figure>\n\n\n\n<p>Google authentication is the easiest auth, you simply have to go to <strong>Authentication<\/strong> tab, click on the <strong>Enable<\/strong> button, right next to it. Type your <strong>App name<\/strong> and <strong>email<\/strong>, finally click on <strong>Enable<\/strong> button. That&#8217;s pretty much it! Like I said, this is the<\/p>\n\n\n\n<h3 id=\"facebook-authentication\">Facebook Authentication<\/h3>\n\n\n\n<p>Facebook Authentication is most hardest part if this blog. It seems hard, don&#8217;t just leave you&#8217;re gonna learn much. Be with me.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620914341517\/HEQifSwG5C.png\" alt=\"screely-1620914280607.png\"\/><\/figure>\n\n\n\n<p>First of all, go to <a href=\"https:\/\/developers.facebook.com\/\">developers.facebook.com<\/a>. SIgn In with your Facebook account. After Signing In, you&#8217;ll be redirected to this page where you could create a new app. Click on <strong>Create App<\/strong> to create a new app.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620914494915\/uCQZiMvKf.png\" alt=\"screely-1620914486642.png\"\/><\/figure>\n\n\n\n<p>Enter your app details, and create a new app. After creating a new app, go to <strong>Settings &gt; Basic<\/strong>, here you could get your <code>App Id<\/code> and <code>App Secret<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620914612593\/3XJqOrt-8.png\" alt=\"screely-1620914604011.png\"\/><\/figure>\n\n\n\n<p>Now, we need to go to our firebase console. Inside our app, go to the <strong>Authentication<\/strong> tab, near Facebook, click on the <strong>Enable<\/strong> button, right next to it. Enter your <code>App Id<\/code> and <code>App Secret<\/code>. Before clicking save, make sure to copy your redirect URL. It is very much necessary to make your authentication complete.<\/p>\n\n\n\n<p>Now, go to the <strong>Products<\/strong> tab, click on the <strong>Plus Icon<\/strong>, choose <strong>Authentication<\/strong>. This will create a new authentication method.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620915015668\/E1TCYPKFi.png\" alt=\"screely-1620915011616.png\"\/><\/figure>\n\n\n\n<p>Now, you can see a new tab <strong>Facebook Login<\/strong> under products. Click on it and scroll a bit to <strong>Valid Oath Redirect URIs<\/strong>, here you can now paste the link you copied. That&#8217;s pretty much it! Facebook Authentication is completed! Well done ?<\/p>\n\n\n\n<h3 id=\"github-authentication\">Github Authentication<\/h3>\n\n\n\n<p>So, here comes the last part of Authentication. The most amazing <strong>Github<\/strong> authentication is here. So, to create GitHub authentication, first Sign In to your Github account. Go to your settings.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620915229908\/FD4dGORFQ.png\" alt=\"screely-1620915220541.png\"\/><\/figure>\n\n\n\n<p>From Settings, go to <strong>Developer Settings &gt; OAth Apps<\/strong>. Click on <strong>Register a new application<\/strong> button to create a new OAth app.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620915359417\/XmVKyyuwQ2.png\" alt=\"screely-1620915351981.png\"\/><\/figure>\n\n\n\n<p>Enter your app details and click on <strong>Register Application<\/strong> to create a new app.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620915639773\/gsAqm1MGg.png\" alt=\"screely-1620915635455.png\"\/><\/figure>\n\n\n\n<p>Now, you will be redirected to a page where you get your <code>App Id<\/code> and <code>Client Secret<\/code>. Copy both of them.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1620915608099\/R42XlXYCH.png\" alt=\"screely-1620915600789.png\"\/><\/figure>\n\n\n\n<p>Now, In your firebase app console, go to <strong>Authentication<\/strong> tab, click on the <strong>Enable<\/strong> button, next to Github. Enter your <code>App Id<\/code> and <code>Client Secret<\/code>. Before clicking Save, copy your redirect URL, you need it to complete the authentication.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1621157171855\/pe0d6IRav.png\" alt=\"screely-1621157156401.png\"\/><\/figure>\n\n\n\n<p>Now, go back to your GitHub Oath app, scroll a bit and paste the link in the <strong>Authorization callback URL<\/strong>. That&#8217;s pretty much it. Thanks for being with me. We have finally completed it. Now, its time for testing \u2728\ufe0f<\/p>\n\n\n\n<h3 id=\"testing-authentication\">Testing Authentication<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1621157909398\/kQhigzD9d.png\" alt=\"screely-1621157900952.png\"\/><\/figure>\n\n\n\n<p>Now, that&#8217;s it. We just need to test it. Here is how our app looks now \u261d\ufe0f. We have created auth in such a way that if a user is signed in, it will <code>console.log(user)<\/code> or if an error happens `console.log(err). So, let&#8217;s just check it out!<\/p>\n\n\n\n<h4 id=\"google-authentication-1\">Google Authentication<\/h4>\n\n\n\n<p><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1621157865300\/GE4IXbG4J.png\" alt=\"screely-1621157857858.png\"> Yep! \u2705\ufe0f, it worked. We can see a new user up in the console.<\/p>\n\n\n\n<h4 id=\"facebook-authentication-1\">Facebook Authentication<\/h4>\n\n\n\n<p><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1621157629171\/U2KM1GqyC.png\" alt=\"screely-1621157605650.png\"> Glad it worked \u2705\ufe0f Logs a long string with our user<\/p>\n\n\n\n<h4 id=\"github-authentication-1\">Github Authentication<\/h4>\n\n\n\n<p><img src=\"https:\/\/cdn.hashnode.com\/res\/hashnode\/image\/upload\/v1621157873499\/Ei78mlSnF.png\" alt=\"screely-1621157867741.png\"> It worked really well \u2705\ufe0f Everything is working as expected.<\/p>\n\n\n\n<p>Our testing has been successfull ? Great job friends, I hope you loved the blog and learned a lot!<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h3 id=\"wrapping-up\">? Wrapping Up<\/h3>\n\n\n\n<p>Yeah, that&#8217;s a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter <a href=\"https:\/\/twitter.com\/SavioMartin7\">@saviomartin7<\/a>. Give a follow!<\/p>\n\n\n\n<p>Follow me on Github <a href=\"https:\/\/github.com\/saviomartin\">@saviomartin<\/a>, Don&#8217;t miss my amazing projects! ?<\/p>\n\n\n\n<p>I hope you learned to use Unsplash API and created an image search app, now go start building amazing apps. Feedbacks are greatly appreciated! ?<\/p>\n\n\n\n<p>Have an amazing day!<\/p>\n\n\n\n<h4 id=\"lets-connect\">? Lets connect<\/h4>\n\n\n\n<ul><li><a href=\"http:\/\/github.com\/saviomartin\">Github<\/a><\/li><li><a href=\"https:\/\/twitter.com\/saviomartin7\">Twitter<\/a><\/li><li><a href=\"https:\/\/www.linkedin.com\/in\/saviomartin\/\">LinkedIn<\/a><\/li><li><a href=\"https:\/\/www.instagram.com\/teen_developer\/\">Instagram<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This is Savio here. I&#8217;m young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2367"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2367"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2367\/revisions"}],"predecessor-version":[{"id":2368,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2367\/revisions\/2368"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}