The Express route examples in this tutorial use async/await, so we need to handle errors differently.įinally, here’s a Github Gist with some of the code samples from this tutorial.By João Henrique How to create a full stack React/Express/MongoDB app using Docker “assorted-color filed intermodal containers” by frank mckenna on Unsplash See Google’s docs on doing this sort of thing. We could implement other UI on the front-end, and then POST tokens to different /api/v1/auth/:provider routes, where the tokens will be decoded, a user found and added to the session. This approach could be extended for other federated login providers. Here’s a Github Gist showing what one could look like. You’ll probably need to use a context provider and hook to handle the currently logged in user in your React app. We want to use this information to log a user into our own back-end, so the next step is to send the ID token to our own API: const handleLogin = async googleData => ) Next steps Then, the component will trigger the handleLogin function, passing in a Google user profile object, which contains an encrypted ID token. When we click the button, it will trigger a pop-up where we can choose the Google account we want to log in with. We can render the component in our app like: Install it with: npm i react-google-login We’ll use the popular react-google-login package to display a “Log in with Google” button that will handle displaying the Google login prompt and retrieving information about the user. Add a login component to our React appįirst, make the client ID from earlier available in a. We’ll only need the client ID for this example. We just care about local testing for now, so we can use this value for both: Google will then give us a client ID and a client secret. Google will ask us for authorised origins and a redirect URI. Name it something like “Log in with Google”.
Now we can go to the Credentials screen and create a new oAuth client ID for a web application. Once we’ve created our credentials, we should see something like this.
0 kommentar(er)
