Home

Google Login

Learn how to interact with Google Login

Openfort Auth supports Sign in with Google on the web, native Android applications and Chrome extensions.

Overview#

To support Sign in with Google you need to configure the Google provider in the Openfort dashboard for your project.

There are three general ways to use Sign in with Google, depending on the application you're building:

In some cases you're able to use the OAuth flow within web-based native apps such as with React Native, Expo or other similar frameworks. It is best practice to use native Sign in with Google capabilities whenever possible.

Before you can use Sign in with Google, you need to obtain a Google Cloud Platform account and have a project ready or create a new one.

Using the OAuth flow for web#

Sign in with Google's OAuth flow is designed for web or browser based sign in methods. It can be used in web-based apps as well as in websites, though sometimes it is worthwhile considering using One Tap login directly.

Behind the scenes, Openfort Auth uses the Google OAuth 2.0 APIs, which are OpenID Connect certified, to perform the authentication.

To initiate sign in, you can use the initOAuth() method from the Openfort JavaScript library.

To redirect the user back to your website, you can use the redirectTo option:


_10
const response = await openfort.initOAuth(
_10
OAuthProvider.Google,
_10
{
_10
redirectTo: 'https://your-website.com',
_10
}
_10
);

This call takes the user to Google's consent screen. When the flow ends, the user's profile information is exchanged and validated with Openfort Auth before it redirects back to your web application with a sessionId as a query parameter. This sessionId can be used to authenticate the user using authenticateWithOAuth(). The user will be redirected to the default callback URL, which is https://openfort.xyz/iam/v1/oauth/callback. In those cases, you can use the authenticateWithOAuth() method to complete the flow with the key obtained from initOAuth():


_10
await openfort.authenticateWithOAuth(
_10
OAuthProvider.Google,
_10
identityToken,
_10
TokenType.IdToken,
_10
);

Configuration #

To use the OAuth 2.0 flow, you will require the following information:

  1. Obtain OAuth credentials for your Google Cloud project in the Credentials page of the console. When creating a new credential, choose Web application. In Authorized redirect URIs enter https://openfort.xyz/iam/v1/oauth/callback.
  2. Configure the OAuth Consent Screen. This information is shown to the user when giving consent to your app. Configure the non-sensitive scopes by making sure the following ones are selected: .../auth/userinfo.email, .../auth/userinfo.profile, openid. If you're selecting other sensitive scopes, your app may require additional verification.
  3. Finally, add the client ID and secret from step 1 in the Google provider on the Supabase Dashboard.

Uppon successful authentication, the SDK will return a token that can be used to authenticate the user in your application.

response.json

_16
{
_16
"player": {
_16
"id": "pla_cc9ed2b7-c5f5-4c43-8dca-c4b104ba1762",
_16
"object": "player",
_16
"createdAt": 1710976453,
_16
"linkedAccounts": [
_16
{
_16
"provider": "google",
_16
"disabled": false,
_16
"externalUserId": "2"
_16
}
_16
]
_16
},
_16
"token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJhdWQiOiJwcm9fOGY3ZTM1NTktMjhkNy00MWE2LTgxNGMtMjU0OTkzZTdkNjFkLXRlc3QiLCJleHAiOjE3MTA5ODI2MDIsImlhdCI6MTcxMDk3OTAwMiwiaXNzIjoib3BlbmZvcnQueHl6Iiwic2lkIjoiMzhhMDdmMzktMTUxOS00MjE0LWJmNmMtNzI0Zjg0ZDBiZGQwIiwic3ViIjoicGxhX2NjOWVkMmI3LWM1ZjUtNGM0My04ZGNhLWM0YjEwNGJhMTc2MiJ9.EcFtS__GwyxJu1S3tO7jMBbTCIJCpqsoNxxJrqILrKjNl2N5-SIMG2z_s2Vs8ztG6KAVy6zIp6P9GzfD7s4JiA",
_16
"refreshToken": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJzaWQiOiIzOGEwN2YzOS0xNTE5LTQyMTQtYmY2Yy03MjRmODRkMGJkZDAiLCJpYXQiOjE3MTA5NzkwMDIsImV4cCI6MTcxMzU3MTAwMn0.koNd4eoevBQQR3-z0CMGL5qVzOURZEeAgjvrHMRloLgDbScS2Qbi4W-vf2fE0fYOWUIAHnAq7cDABNwSQrEvSQ"
_16
}

Resources#