# Sign in with Social Login ### 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](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-MH_7vfMmIjopwJQ-ESI%2F-MH_8SXtlVChNPg3Of_Z%2Fimage.png?alt=media\&token=bfdbf5b3-e800-4ab6-925a-56a2f9233d80) ### 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](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone) as the primary login method. {% content-ref url="web-sdk-verify-email-phone" %} [web-sdk-verify-email-phone](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone) {% endcontent-ref %} 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](https://join.slack.com/t/askcotter/shared_invite/zt-dxzf311g-5Mp3~odZNB2DwYaxIJ1dJA) ## Steps 1. Integrate Cotter's Login Form following [Sign in with Email/Phone Number](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone) as the primary login method. 2. [Set up your Social Login](#setting-up-social-login-provider). 3. [Connecting a Social Account to an existing user ](#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](#getting-access-tokens-from-the-social-login-provider) to use their API. ## Setting Up Social Login Provider {% hint style="info" %} Make sure you are using the JS Package **version >= 0.3.16** {% endhint %} 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](https://dev.cotter.app/) > Social Login * [Github Instructions](https://docs.cotter.app/sdk-reference/web/sign-in-with-social-login-provider/github-instructions) * [Google Instructions](https://docs.cotter.app/sdk-reference/web/sign-in-with-social-login-provider/google-instructions) 2. Go to [Dashboard](https://dev.cotter.app/) > Project > Form & Fields, check the login provider that you want to enable under "Social Login Providers" and press **Save**. ![](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-MWQcQB2UgFswdw39oUg%2F-MWQcmxqcP-fnFc--n12%2FScreen%20Shot%202021-03-22%20at%201.31.31%20PM.png?alt=media\&token=c1c97248-458c-4d75-adde-af1a872ff9bb) 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**](https://docs.cotter.app/sdk-reference/web/web-sdk-verify-email-phone), inside the `then` callback that you provided. ```javascript 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 : * **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** [**user1@gmail.com**](mailto:user1@gmail.com) **doesn't exist**: It will create a new user with email , and the user can log in both with their Github account or with email using a magic link or OTP. * **Case 3 – If a user with email** [**user1@gmail.com**](mailto:user1@gmail.com) **already exists**: It will ask the user if they want to link the account for with the Github account. If they agree, the user can always login both with their Github account or with email using a magic link or OTP. ![Case 3: Prompt for the user to connect their existing account with the Github account](https://107069962-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M0QGDMRD8y_Kd-BpOvT%2F-MGMROdZrPKL7WqtmWW0%2F-MGMSCjt9Zb2Ur1eQwLM%2Fimage.png?alt=media\&token=0194de27-f018-40ac-9ce8-664aee4aea97) ### 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. ```javascript 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: {% content-ref url="sign-in-with-social-login-provider/getting-access-tokens-from-social-login-providers" %} [getting-access-tokens-from-social-login-providers](https://docs.cotter.app/sdk-reference/web/sign-in-with-social-login-provider/getting-access-tokens-from-social-login-providers) {% endcontent-ref %} ## 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.**