{"id":21,"date":"2022-11-06T22:47:36","date_gmt":"2022-11-06T22:47:36","guid":{"rendered":"https:\/\/blogs.oregonstate.edu\/seanpark\/?p=21"},"modified":"2022-11-06T22:47:36","modified_gmt":"2022-11-06T22:47:36","slug":"google-sign-up-log-in-authentication-strategies","status":"publish","type":"post","link":"https:\/\/blogs.oregonstate.edu\/seanpark\/2022\/11\/06\/google-sign-up-log-in-authentication-strategies\/","title":{"rendered":"Google Sign Up\/Log In Authentication Strategies"},"content":{"rendered":"\n<p>Currently our team is working implementing Google Sign Up and Log In for the client-side React application for our Teacher Supply Donation web app.  During the implementation, I discovered that we have to take into account the method we&#8217;re implementing with.  At first, the authenticating via Google was implemented using the passport-google-oauth20 package which basically had the Express server receive the request from the client containing the user&#8217;s Google Id, if the id already existed in database we would simply return the user data, otherwise we create a new user in the database and then return the user data.  The data was sent back via a callback route which required a redirect.  This scenario is best for server-side rendering.  This is where we realized we had an issue with our initial implementation since our project wants to redirect the user using Client-Side routing based on authorization.<\/p>\n\n\n\n<p>After some research, I discovered the <a href=\"https:\/\/www.npmjs.com\/package\/@react-oauth\/google\">@react-oauth\/google<\/a> NPM package.  This package allows the developer to create a Google Login component and handle authenticating the user with Google on the client side.  Once Google responds that the user is authenticated as a Google user, we can then send the access token to our Express server to exchange for a JWT token.  With that JWT token, the user will have authorization to our protected routes in the React application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"550\" height=\"705\" src=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5938\/files\/2022\/11\/CleanShot-2022-11-06-at-14.44.57.png\" alt=\"\" class=\"wp-image-22\" srcset=\"https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5938\/files\/2022\/11\/CleanShot-2022-11-06-at-14.44.57.png 550w, https:\/\/osu-wams-blogs-uploads.s3.amazonaws.com\/blogs.dir\/5938\/files\/2022\/11\/CleanShot-2022-11-06-at-14.44.57-234x300.png 234w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/figure>\n\n\n\n<p>When dealing with Authentication and Authorization strategies, first decide whether the use case is for Server-Side rendering or Client-Side routing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Currently our team is working implementing Google Sign Up and Log In for the client-side React application for our Teacher Supply Donation web app. During the implementation, I discovered that we have to take into account the method we&#8217;re implementing with. At first, the authenticating via Google was implemented using the passport-google-oauth20 package which basically &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blogs.oregonstate.edu\/seanpark\/2022\/11\/06\/google-sign-up-log-in-authentication-strategies\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Google Sign Up\/Log In Authentication Strategies&#8221;<\/span><\/a><\/p>\n","protected":false},"author":12694,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/users\/12694"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":1,"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":23,"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/posts\/21\/revisions\/23"}],"wp:attachment":[{"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.oregonstate.edu\/seanpark\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}