Sign in with Social Login

Sign in with Social Login allows you to authenticate users using their social accounts like Google, Github, etc.

What you're building

Allow users to sign in with a Social Account, without getting duplicate accounts. With Cotter, we automatically link the user's existing account with their Social Account.

Sign in with Github and Google using Cotter's SDK

Key Features

• Simple integration, no additional code.

• Auto-linking with existing accounts, users can either log in with their email or with Github and it will go to the same user account.

• Connect Social Provider Account from inside your Settings page to allow easy API integrations. (For example, a user never uses the "Sign in with Github", but you need their Github access token to enable deployment: you can ask them to press a button to connect their Github account).

Overview

1. To enable this feature, you need to first configure Sign in with Email/Phone Number as the primary login method.

Sign In with Email/Phone Number

2. You can then add options for the user to sign in using a Social Login Provider in the Dashboard.

Available Providers

• Github

• Google

• Let us know what you need

Steps

1. Integrate Cotter's Login Form following Sign in with Email/Phone Number as the primary login method.

2. Set up your Social Login.

3. Connecting a Social Account to an existing user that didn't use Sign in with a Social Provider from a button.

4. Getting the Access Token from the Social Provider to use their API.

Setting Up Social Login Provider

Make sure you are using the JS Package version >= 0.3.16

1. You will need to create an "App" for the Social Login Provider. Follow the instructions for each login provider. You will need to enter the credentials to Dashboard > Social Login

   • Github Instructions

   • Google Instructions

2. Go to Dashboard > Project > Form & Fields, check the login provider that you want to enable under "Social Login Providers" and press Save.

4. That's it, you should now see the "Sign in with Github" button below the email/phone number input.

Receiving the User Response after successful login

You will receive responses the same way as Sign in with email/phone, inside the then callback that you provided.

var cotter = new Cotter(API_KEY_ID); // Specify your API KEY ID here
cotter
  .withFormID("form_default") // Use customization for form "form_default"
  .signInWithLink()
  .showEmailForm()
  .then((response) => {
    setpayload(response); // 👈 You'll receive the response here, as usual
  })
  .catch((err) => console.log(err));

How it works

If a user signed-in with Github and the Github username is user1 and the Github email is [email protected]:

• Case 1 – If a user with Github username user1 has logged-in before and already associated with a user (userID: 123), then the user can automatically log in.

• Case 2 – If a user with email [email protected] doesn't exist: It will create a new user with email [email protected], and the user can log in both with their Github account or with email [email protected] using a magic link or OTP.

• Case 3 – If a user with email [email protected] already exists: It will ask the user if they want to link the account for [email protected] with the Github account. If they agree, the user can always login both with their Github account or with email [email protected] using a magic link or OTP.

Case 3: Prompt for the user to connect their existing account with the Github account

Connecting a Social Account to an existing user

You can alternatively connect the user's Github/Google account when the user is already logged in. For example, your website may have a Settings page, and the user can press a button "Connect Github Login" to allow them to connect their Github Account and use it to log in.

Add a button on your website, and call this function to connect the user's Github Account with the currently logged in user.

const connectToGithub = async () => {
  var cotter = new Cotter(apiKey)
  const accessToken = await cotter.tokenHandler.getAccessToken()
  cotter.connectSocialLogin("GITHUB", accessToken?.token) // pass in the provider's name
}

Getting Access Tokens from the Social Login Provider

When your users sign in with Github, Github returns an access_token that you can use to call their API. We store this information for you. To get the access_token for each user, follow the instructions below:

Getting Access Tokens from Social Login Providers

UI Considerations

Logging-in to social providers requires us to redirect the user to the provider's page to login when necessary. When the login process is done, the users will be redirected back to the page where you embedded the form:

For example:

• Login Page that contains the form: example.com/login

  • User login to Github: redirect to github.com/oauth/....

  • User finish login: redirect back to example.com/login?code=xyz&state=abc

As you can see, we pass in a code and state and other parameters when redirecting back to your login page. Cotter's Login Form automatically handles this query parameters for you and will resolve the Promise with the usual Cotter user information response.

With that said, make sure your UI takes into account that the user will be redirected away and then back to your login page.