Add Google OAuth to your Login Form, No-Code!
Allow users to log in using their Google credentials without worrying about duplicate accounts.
In this tutorial, we will create a Passwordless Login Page with the option for users to login using their Google accounts. With Cotter, we automatically link the user’s existing account with their Social Account, so you do not have to worry about duplicate accounts!
How it Works
If a user signs in to your site with Google with an underlying email user1@gmail.com:
Case 1:
User status: Existing
Log in method: Google, underlying email: user1@gmail.com
Social login linking status: Linked with userID: 123
Then, the user can automatically log in.
Case 2:
User status: Existing
Log in method: Google, underlying email: user1@gmail.com
Social login linking status: Unlinked
Then, Cotter will ask if the user wants to link their Google account. If they agree, then the user can login either with their Google account or with user1@gmail.com using magic link or OTP.
Case 3:
User status: New
Log in method: Google, underlying email: user1@gmail.com
Social login linking status: -
Then, Cotter will create a new user with email user1@gmail.com and the user can log in with either their Google account or with user1@gmail.com using magic link or OTP.
Create Google OAuth 2.0 Credentials
- Go to Google Credentials page.
2. Create Project or choose an existing one.
3. Configure consent screen.
Please be sure to set the User Type as External.
Follow the procedures to Submit for verification. However, if you are still waiting for your app to be verified by Google, click “Hide Advanced” and click “Go to cotteremaillist.herokuapp.com (unsafe)” to test your app.
4. Click Create Credentials > OAuth client ID.
5. Select Web application for the application type.
6. Name your OAuth 2.0 client.
7. Add https://www.cotter.app/api/v0/oauth/token/callback/GOOGLE as the Authorized redirect URIs.
8. Click Create.
Cotter Setup
1. Go to Cotter Dashboard > Social Login and add a New Login Connection: Google.
2. Copy and paste your Client ID and Client Secret. Then, add the Scopes that you need and click Create.
3. Go to Cotter’s Dashboard > Branding. Under “Social Login Providers”, choose Google and press Save.
4. That’s it, you should now see the “Sign in with Google” button below the email/phone number input field.
Creating a Login Page and a Protected Page
Follow these tutorials to integrate Cotter’s Magic Link to your Webflow/Bubble site:
Webflow: https://blog.cotter.app/integrate-cotter-magic-link-to-webflow-in-less-than-15-minutes/
Questions & Feedback
Come and talk to the founders of Cotter and other developers who are using Cotter on Cotter’s Slack Channel.
Ready to use Cotter?
If you enjoyed this tutorial and want to integrate Cotter into your website or app, you can create a free account and check out our documentation.
If you need help, ping us on our Slack channel or email us at team@cotter.app.
Originally published at https://blog.cotter.app on October 1, 2020.
