In this last part of the tutorial, we will give users the ability to log in with Google. Currently, they can only log in with an email and a password.
To do this, you will use Foal's social authentication system.
This section assumes that you have already set up a Google application and have retrieved your client ID and secret. If you have not, you might want to check this page first. The redirection URIs allowed in your Google application must include
The first step is to update the
User model. Some users may only use the social login and therefore not have a password. To take this into account, we will make the
password column accept null values.
user.entity.ts and update its contents.
Make and run the migrations.
auth.controller.ts and add a condition to check whether the password value is
null in the database.
Now that the password problem is solved, you can install the packages and provide your social credentials in the configuration.
Create the controller.
Open the file and add two new routes.
|Redirects the user to Google login page.|
|Handles redirection from Google once the user has approved the connection.|
api.controller.ts and replace the path prefix of the
Go to http://localhost:3001/login and click on the Connect with Google button. You are redirected to the Google login page. Once you have validated the connection, you will be redirected to the home page. If you have a Google profile picture, you will see it on your profile page.
For this to work, you need to make sure you are using port
3001to test the social login. This assumes that you created the production build in the previous step of this tutorial. You can't use the React development server here because the redirects won't work with both ports
Congratulations! You have reached the end of this tutorial. You can find the complete source code here.