{
    "componentChunkName": "component---src-templates-article-page-template-js",
    "path": "/how-to/enable-google-login/",
    "result": {"data":{"markdownRemark":{"frontmatter":{"title":"Enable Google login","slug":"enable-google-login","updated":"2020-12-04T00:00:00.000Z","category":"how-to-users-and-authentication","ingress":"In this how-to guide we'll take a look at the process of setting up Google login for your marketplace. It will allow your users to sign and log in by using their Google accounts.","skills":null},"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Note, that Google login requires ftw-daily version\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/releases/tag/v6.5.0","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"6.5.0"}]},{"type":"text","value":" or\nftw-hourly version\n"},{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-hourly/releases/tag/v8.5.0","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"8.5.0"}]},{"type":"text","value":"."}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"extrainfo","properties":{"title":"Updating from upstream not an option?"},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Has your marketplace UI application diverged from ftw-daily or\nftw-hourly so much that pulling upstream updates to enable Google login\nis not a feasible option? In that case, take a look at the following\nchange sets in ftw-daily for reference on how to implement Google login\nin the front end:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/pull/1366","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Facebook login changes"}]},{"type":"text","value":"\n(contains many updates regarding social logins in general)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://github.com/sharetribe/ftw-daily/pull/1376","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Google login changes"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Enabling Google login consists of three main steps:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Create a Google Sign-In Project"}]},{"type":"text","value":" Google Sign-In Project is what\nconnects your marketplace to Google and let's Google know that users\nfrom your marketplace are allowed to authenticate themselves using the\nGoogle Sign-In."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Create an identity provider client in Flex Console"}]},{"type":"text","value":" Identity\nprovider (IdP) client is what let's Flex know that the users of your\nmarketplace are allowed to use the Google Sign-In Project you created\nto log into your marketplace."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Configure FTW"}]},{"type":"text","value":" A few attributes from the Sign-In Project will need\nto be configured to FTW so that FTW can perform the login flow via\nGoogle."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"configure-the-google-sign-in-project","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configure-the-google-sign-in-project","ariaLabel":"configure the google sign in project permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Configure the Google Sign-In Project"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Note, that Google's interface is subject to change. If you encounter\nany inconsistencies with this step-by-step guide, please contact\nSharetribe's Support team and we will be happy to assist."}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"First thing to do is to create a Google Sign-In project for your\nmarketplace by following these steps:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"create-and-set-up-a-google-sign-in-project","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#create-and-set-up-a-google-sign-in-project","ariaLabel":"create and set up a google sign in project permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Create and set up a Google Sign-In Project"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Go to "},{"type":"element","tagName":"a","properties":{"href":"https://console.developers.google.com/","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://console.developers.google.com/"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Log in with your Google account (you may have to register as a\ndeveloper if you don't have a Google developer account already)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click the \"Select a project\" button on the top bar."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When the pop-up opens click the \"New project\" button on the top right\ncorner."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Name your Project (for example your marketplace name) and click\n\"Create\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Go to the \"OAuth consent screen\" page e.g. from the left side menu."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Once there, select \"External\" as a User type and click \"Create\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Fill in at least the required fields in this next page. You need to\nadd e.g the name and user support email for your app."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"From the left sidebar go to the \"Credentials\" page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click \"+ Create credentials\" from the top of the page."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Select \"OAuth Client ID\""}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Application type is \"Web application\". You can give it any name."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In \"Authorized JavaScript origins\", add your full marketplace's URL\nwith https and possibly www or the subdomain, without the trailing\nslash, e.g. \""},{"type":"element","tagName":"a","properties":{"href":"https://www.example.com","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://www.example.com"}]},{"type":"text","value":"\", \""},{"type":"element","tagName":"a","properties":{"href":"https://example.com","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://example.com"}]},{"type":"text","value":"\", or\n\""},{"type":"element","tagName":"a","properties":{"href":"https://something.example.com","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"https://something.example.com"}]},{"type":"text","value":"\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In the \"Authorized redirect URIs\", add your marketplace address\nfollowed by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"/api/auth/google/callback"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click \"Create\"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"configure-an-identity-provider-client-in-console","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configure-an-identity-provider-client-in-console","ariaLabel":"configure an identity provider client in console permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Configure an identity provider client in Console"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now that your Google Sign-In project is all set up, a corresponding\n"},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"identity provider client"}]},{"type":"text","value":" will need to be configured for your\nmarketplace. This will tell Flex that your users will be allowed to log\ninto your marketplace using the Google Sign-In you just created. The\ninformation stored in an IdP client is used to verify a token obtained\nfrom Google when a user logs in."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"An identity provider client can be configure with the following steps:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Go to\n"},{"type":"element","tagName":"a","properties":{"href":"https://flex-console.sharetribe.com/social-logins-and-sso","target":"_blank","rel":["noopener","noreferrer"]},"children":[{"type":"text","value":"Social logins & SSO in Console"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Under "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Identity provider clients"}]},{"type":"text","value":" click \"+ Add new\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Set \"Client name\". This can be anything you choose, for example,\n\"Google login\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Under \"Select identity provider\", pick \"Google\"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Set the "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Client ID"}]},{"type":"text","value":". This value is the Client ID from your Google\nSign-In project. You can see the value under "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Credentials > OAuth 2.0\nclient IDs"}]},{"type":"text","value":". Make sure you have the project you just created selected\nfrom the top bar in Google developer console. In case you have\nmultiple clients configured in Google Sign-In, use the client ID of\nyour "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Web application"}]},{"type":"text","value":" client here. See step 6. for more information."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The IdP client config should now look something like this:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 635px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/docs/legacy/static/78c357a68c7418555b854a59ffd9fcc0/53fb6/add-google-idp-client.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 107.54716981132076%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAACXBIWXMAABYlAAAWJQFJUiTwAAACbUlEQVQ4y62Uy27TQBSG846IRwCJJ+AJWIHYoUqwqoJU0qRFQuUm1jQtCHaVqtA28S1OHDt27BmP7bn8aMZJaRXqBIljfToej/3P+W3Pab07eo/vP37ia/8Ex/1THJ/c5Bv6p5vR92qNDx8/oxWGIf5XLJIErdFoZAbTIMBgMEAQBLBtG5ZlgRAKKSWEEI1wzo2G53lo6Yd1xHFshKIogu/7cBwHjDEzp5RqRC+qY+z7WtAxA72SjtXkdajNVpWsb/JrwbrCMIpg2TYc1zX2uRCQSkLqCjaxLMK/WWFaEHjJFJMsxCSdYcEJUpkj4QQJz+6AIK4yEJ6vC1ZlBSmkySUrwHKGnNCtLK/iluVgNsPg8hemswB5wUBZDlrk4FJAKAHeACvYXyyzDG48QZjHSAU1lhecIqmyRuIqRVaSdUFecYiK/5PFRsvjiY/B1QWu7CEsz8Y48E1eoa8PnRHssQPLqxk6FkauhThN1ivMCoqILQxhnpg8ozFCGps8zUIEZI6ZZnWdzBGQCFlJ/wg615Yr8LKE0Lko9B++vVeF9QopKxHEGeKUIlpQJKQAKQS4kFDYbuvdEmSVQEQEUiaxyCViKjAnHJVQG/fzLcGVZaXutrhtc6gFHee6KSiFNe5+bfU+1oe4KTgaWfVH4Xxj39OLanTjgFx+DLkEgKv74eXlEHo+zwswVjaSZRRJmgEF8Mr9ggfnO3h80cbD8x08d4/g28ayu7S84c9QQFly5EVpxi+8T7h39hSPBi9x/+wZnnhvMZ/O0drdbePg4BD7+110u71Ger0Dgznv9NDZ28ebvQ46ex0cdg/Rbr/GbwaOinCJqZhrAAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/78c357a68c7418555b854a59ffd9fcc0/82e29/add-google-idp-client.webp 159w","/docs/legacy/static/78c357a68c7418555b854a59ffd9fcc0/ef33f/add-google-idp-client.webp 318w","/docs/legacy/static/78c357a68c7418555b854a59ffd9fcc0/f1837/add-google-idp-client.webp 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/webp"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"source","properties":{"srcSet":["/docs/legacy/static/78c357a68c7418555b854a59ffd9fcc0/8b9b5/add-google-idp-client.png 159w","/docs/legacy/static/78c357a68c7418555b854a59ffd9fcc0/fa108/add-google-idp-client.png 318w","/docs/legacy/static/78c357a68c7418555b854a59ffd9fcc0/53fb6/add-google-idp-client.png 635w"],"sizes":"(max-width: 635px) 100vw, 635px","type":"image/png"},"children":[]},{"type":"text","value":"\n          "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/docs/legacy/static/78c357a68c7418555b854a59ffd9fcc0/53fb6/add-google-idp-client.png","alt":"Add Google identity provider client","title":"Add Google identity provider client","loading":"lazy","decoding":"async","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":6},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you have more than one client configured in your Google Sign-In\nproject, mobile clients for example, add the additional client IDs to\nthe same identity provider client under \"Trusted client IDs\" by\nclicking \"+ Add new trusted client\". In case you are using two\ndistinct Google Sign-In projects, configure those as distinct clients\nin Console but always bundle all the client IDs of a single project\ninto one identity provider client in Flex Console."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click \"Add client\" and your identity provider client is ready."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"configure-ftw","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configure-ftw","ariaLabel":"configure ftw permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","height":"16","version":"1.1","viewBox":"0 0 16 16","width":"16"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","d":"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"},"children":[]}]}]},{"type":"text","value":"Configure FTW"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Last step to enabling Google login is to configure FTW with the values\nthat you used to add an identity provider client in Console. Add the\nfollowing environment variables to FTW:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"REACT_APP_GOOGLE_CLIENT_ID"}]}]},{"type":"text","value":" The Client ID of your Google Sing-In.\nCorresponds to "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"client ID"}]},{"type":"text","value":" of the identity provider client in Console."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"GOOGLE_CLIENT_SECRET"}]}]},{"type":"text","value":" The Client Secret of your Google Sign-In."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more information on FTW environment variables, see the\n"},{"type":"element","tagName":"a","properties":{"href":"/docs/legacy/ftw/ftw-env/"},"children":[{"type":"text","value":"FTW Environment configuration variables"}]},{"type":"text","value":" article."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"That is it. Setting these environment variables will make FTW render the\nGoogle login button in signup and login forms."}]}],"data":{"quirksMode":false}},"headings":[{"value":"Configure the Google Sign-In Project","depth":2},{"value":"Create and set up a Google Sign-In Project","depth":3},{"value":"Configure an identity provider client in Console","depth":2},{"value":"Configure FTW","depth":2}]}},"pageContext":{"slug":"enable-google-login","category":"how-to-users-and-authentication"}},
    "staticQueryHashes": ["3794076007","439097193","717698143"]}