How to add third parthy login with Supertokens (Google)

This guide will first cover the steps to get everything what you need from google to create the credentials that you need in your app and how to integrate it into your app using supertokens.

Get Google Credentials

(From the google official documentation page)

1. Navigate to the Google Auth Platform Clients page. 

   1. You will be prompted to create a project if you do not have one selected. 

   2. You will be prompted to register your application to use Google Auth if you are yet to do so. This is required before creating a client.

      

2. Click CREATE CLIENT

3. Select the appropriate application type for your application and enter any additional information required. Application types are described in more detail in the following sections.

4. Fill out the required information for the select client type and click the CREATE button to create the client.

Some things to take into account (using supertokens and translateprompt as example)

Authorised JavaScript origins:
["https://translateprompt.com", "http://localhost:5178"] 

Authorised redirect URIs
["https://translateprompt.com/auth/callback/google", "http://localhost:5178/auth/callback/google"]

At the end you should be able to download a json with the credentials.

Setting up the third party login

Then in the backend of your app you can set the third party recipe.

# See supertokens docs for more examples
from supertokens_python import init, InputAppInfo
from supertokens_python.recipe import thirdparty
from supertokens_python.recipe.thirdparty import ProviderInput, ProviderConfig, ProviderClientConfig, SignInAndUpFeature

init(
    app_info=InputAppInfo(api_domain="...", app_name="...", website_domain="..."),
    framework='...', 
    recipe_list=[
        thirdparty.init(

            sign_in_and_up_feature=SignInAndUpFeature(
                providers=[
                    ProviderInput(
                        config=ProviderConfig(
                            third_party_id="google",
                            clients=[
                                ProviderClientConfig(
                                    client_id="1060725074195-kmeum4crr01uirfl2op9kd5acmi9jutn.apps.googleusercontent.com",
                                    client_secret="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",
                                ),
                            ],
                        ),
                    ),
                ]
            )
        )
    ]
)

And in the Frontend

...
  recipeList: [
    Session.init(),
    ThirdParty.init({
      signInAndUpFeature: {
        providers: [Google.init()]
      }
    })
  ]

# When using the prebuild ui
getSuperTokensRoutesForReactRouterDom(reactRouterDom, [
    ThirdPartyPreBuiltUI
  ]);

After this you’re set to go!