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

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:


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.

Made in Typedream