From 29d32e8e1dfa1de07805422da6b31fce9eea0216 Mon Sep 17 00:00:00 2001 From: Stojan Dimitrovski Date: Wed, 31 May 2023 14:28:20 +0200 Subject: [PATCH 1/9] docs: revamp Sign in with Apple docs --- .../guides/auth/social-login/auth-apple.mdx | 245 +++++++----------- 1 file changed, 97 insertions(+), 148 deletions(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx index a41cc292f61..aac1e9f83a8 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx @@ -3,186 +3,135 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { id: 'auth-apple', title: 'Login with Apple', - description: 'Add Apple OAuth to your Supabase project', + description: 'Use Sign in with Apple with Supabase', } -To enable Apple Auth for your project, you need to set up an Apple OAuth application and add the application credentials to your Supabase Dashboard. +Supabase Auth supports using [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) on the web and in native apps for iOS, macOS, watchOS or tvOS. ## Overview -Apple OAuth consists of six broad steps: +To support Sign in with Apple, you need to configure the [Apple provider in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) for your project. -- Obtaining an `App Id` with “Sign In with Apple” capabilities. -- Obtaining a `Services Id` - this will serve as the `client_id`. -- Obtaining a `secret key` that will be used to get our `client_secret`. -- Generating the `client_secret` using the `secret key`. -- Add your `client id` and `client secret` keys to your [Supabase Project](https://app.supabase.com). -- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js). +There are three general ways to use Sign in with Apple, depending on the application you're trying to build: -## Access your Apple Developer account +- Sign in on the web or in web-based apps + - Using an OAuth flow initiated by Supabase Auth using the [Sign in with Apple REST API](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api). + - Using [Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) directly in the browser, usually suitable for websites. +- Sign in natively inside iOS, macOS, watchOS or tvOS apps using [Apple's Authentication Services](https://developer.apple.com/documentation/authenticationservices) -- Go to [developer.apple.com](https://developer.apple.com). -- Click on `Account` at the top right to log in. +In some cases you're able to use the OAuth flow within web-based native apps such as with [React Native](https://reactnative.dev), [Expo](https://expo.dev) or other similar frameworks. It is best practice to use native Sign in with Apple capabilities on those platforms instead. -![Apple Developer Portal.](/docs/img/guides/auth-apple/apple-developer-portal.png) +Before you can use Sign in with Apple, you need to obtain an [Apple Developer](https://developer.apple.com) account. -## Obtain an App ID +## Using the OAuth flow for web -- Go to `Certificates, Identifiers & Profiles`. -- Click on `Identifiers` at the left. -- Click on the `+` sign in the upper left next to `Identifiers`. -- Select `App IDs` and click `Continue`. -- Select type `App` and click `Continue`. -- Fill out your app information: - - App description. - - Bundle ID (Apple recommends reverse-domain name style, so if your domain is acme.com and your app is called roadrunner, use: "com.acme.roadrunner"). - - Scroll down and check `Sign In With Apple`. - - Click `Continue` at the top right. - - Click `Register` at the top right. +Sign in with Apple's OAuth flow is designed for web or browser based sign in methods. It can be used on web-based apps as well as websites, though some users can benefit by using Sign in with Apple JS directly. -## Obtain a Services ID +Behind the scenes, Supabase Auth uses the [REST APIs](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api) provided by Apple. -This will serve as the `client_id` when you make API calls to authenticate the user. +To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library: -- Go to `Certificates, Identifiers & Profiles`. -- Click on `Identifiers` at the left. -- Click on the `+` sign in the upper left next to `Identifiers`. -- Select `Services IDs` and click `Continue`. -- Fill out your information: - - App description. - - Bundle ID (you can't use the same Bundle ID from the previous step, but you can just add something to the beginning, such as "app." to make it app.com.acme.roadrunner"). - - SAVE THIS ID -- this ID will become your `client_id` later. - - Click `Continue` at the top right. - - Click `Register` at the top right. - -## Find your callback URL - - - -## Configure your Services ID - -- Under `Identifiers`, click on your newly-created Services ID. -- Check the box next to `Sign In With Apple` to enable it. -- Click `Configure` to the right. -- Make sure your newly created Bundle ID is selected under `Primary App ID` -- Add your domain to the `Domains and Subdomains` box (do not add `https://`, just add the domain). -- In the `Return URLs` box, type the callback URL of your app which you found in the previous step and click `Next` at the bottom right. -- Click `Done` at the bottom. -- Click `Continue` at the top right. -- Click `Save` at the top right. - -## Download your secret key - -Now you'll need to download a `secret key` file from Apple that will be used to generate your `client_secret`. - -- Go to `Certificates, Identifiers & Profiles`. -- Click on `Keys` at the left. -- Click on the `+` sign in the upper left next to `Keys`. -- Enter a `Key Name`. -- Check `Sign In with Apple`. -- Click `Configure` to the right. -- Select your newly-created Services ID from the dropdown selector. -- Click `Save` at the top right. -- Click `Continue` at the top right. -- Click `Register` at the top right. -- Click `Download` at the top right. -- Save the downloaded file -- this contains your "secret key" that will be used to generate your `client_secret`. -- Click `Done` at the top right. - -## Generate a `client_secret` - -The `secret key` you downloaded is used to create the `client_secret` string you'll need to authenticate your users. - -According to the [Apple Docs](https://developer.apple.com/documentation/signinwithapplerestapi/generate_and_validate_tokens) it needs to be a JWT -token encrypted using the Elliptic Curve Digital Signature Algorithm (ECDSA) with the P-256 curve and the SHA-256 hash algorithm. - -At this time, the easiest way to generate this JWT token is with [Ruby](https://www.ruby-lang.org/en/). -If you don't have Ruby installed, you can [Download Ruby Here](https://www.ruby-lang.org/en/downloads). - -- Install Ruby (or check to make sure it's installed on your system). -- Install [ruby-jwt](https://github.com/jwt/ruby-jwt). -- From the command line, run: `sudo gem install jwt`. - -Create the script below using a text editor: `secret_gen.rb` - -```ruby -require "jwt" - -key_file = "Path to the private key" -team_id = "Your Team ID" -client_id = "The Service ID of the service you created" -key_id = "The Key ID of the private key" - -validity_period = 180 # In days. Max 180 (6 months) according to Apple docs. - -private_key = OpenSSL::PKey::EC.new IO.read key_file - -token = JWT.encode( - { - iss: team_id, - iat: Time.now.to_i, - exp: Time.now.to_i + 86400 * validity_period, - aud: "https://appleid.apple.com", - sub: client_id - }, - private_key, - "ES256", - header_fields= - { - kid: key_id - } -) -puts token +```ts +supabase.auth.signInWithOAuth({ + provider: 'apple', +}) ``` -1. Edit the `secret_gen.rb` file: +This call takes the user to Apple's consent screen. Once the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session. -- `key_file` = "Path to the private key you downloaded from Apple". It should look like this: `AuthKey_XXXXXXXXXX.p8`. -- `team_id` = "Your Team ID". This is found at the Apple Developer website, under Membership details. This is a 10-character alphanumeric string called "Team ID". Alternatively, this can be seen next to your name in the upper right when viewing your Certificates, Identifiers & Profiles. -- `client_id` = "The Service ID of the service you created". This is the `Services ID` you created in the above step `Obtain a Services ID`. If you've lost this ID, you can find it in the Apple Developer Site: - - Go to `Certificates, Identifiers & Profiles`. - - Click `Identifiers` at the left. - - At the top right drop-down, select `Services IDs`. - - Find your Identifier in the list (i.e. app.com.acme.roadrunner). -- `key_id` = "The Key ID of the private key". This can be found in the name of your downloaded secret file (For a file named `AuthKey_XXXXXXXXXX.p8` your key_id is `XXXXXXXXXX`). If you've lost this ID, you can find it in the Apple Developer Site: - - Go to `Certificates, Identifiers & Profiles`. - - Click `Keys` at the left. - - Click on your newly-created key in the list. - - Look under `Key ID` to find your key_id. +### Configuration -2. From the command line, run: `ruby secret_gen.rb > client_secret.txt`. -3. Your `client_secret` is now stored in this `client_secret.txt` file. +You will require the following information: -## Add your OAuth credentials to Supabase +1. Your Apple Developer account's **Team ID**, which is an alphanumeric string of 10 characters that uniquely identifies the developer of the app. It's often easily accessible in the upper right-side menu on the Apple Developer Console. +2. Register email sources for _Sign in with Apple for Email Communication_ which can be found in the [Services](https://developer.apple.com/account/resources/services/list) section of the Apple Developer Console. +3. An **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple once you create an App ID in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) +4. A **Services ID** which uniquely identifies the web services provided by the app you registered in the previous step. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.web`. +5. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your Supabase project is hosted on. This is usually `.supabase.co` while the redirect URL is `https://.supabase.co/auth/v1/callback`. +6. Create a signing **Key** in the [Keys](https://developer.apple.com/account/resources/authkeys/list) section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the `AuthKey_XXXXXXXXXX.p8` file. If you ever loose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring meeting in your calendar! + +7. Finally, add the information you configured above to the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers). - +## Using native sign in -## Add login code to your client app +Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Apple flow on iOS, macOS, watchOS or tvOS uses the [operating system's built-in functionalities](https://developer.apple.com/documentation/authenticationservices) to prompt the user for consent. -When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `apple` as the `provider`: +When the user provides consent, Apple issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth. -```js -async function signInWithApple() { - const { data, error } = await supabase.auth.signInWithOAuth({ +If you are building an iOS or macOS app using Flutter, you can use `signInWithApple()` to quickly get the user's consent and sign them in to your Supabase project: + +```dart +final AuthResponse = await supabase.auth.signInWithApple(); +``` + +In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so: + +```ts +await supabase.auth.signInWithIdToken({ + provider: 'apple', + token: '', +}) +``` + +Please take a look at these open-source projects which may help you obtain an ID token directly from the OS: + +- [invertase/react-native-apple-authentication](https://github.com/invertase/react-native-apple-authentication) +- [Expo AppleAuthentication](https://docs.expo.dev/versions/latest/sdk/apple-authentication/) + +For apps written in Swift, please consult the [community maintained library](/docs/reference/swift/introduction). + +### Configuration + +Native sign in requires less configuration steps than OAuth flow. You will need to perform these steps: + +1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) +2. Register all of the App IDs that will be using your Supabase project in the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. + +Note that if you're building a native app only, you do not need to setup the OAuth flow. + +## Using Sign in with Apple JS + +[Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) is an official Apple framework for authenticating Apple users on websites. Although it can be used in web-based apps, those use cases will benefit more with the OAuth flow described above. We recommend using this method on classic websites only. + +You can use the `signInWithIdToken()` method from the Supabase JavaScript library on the website to obtain an access and refresh token once the user has given consent using Sign in with Apple JS: + +```ts +function signIn() { + const data = await AppleID.auth.signIn() + + await supabase.auth.signInWithIdToken({ provider: 'apple', + token: data.id_token, + nonce: '' }) } ``` -When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage: +Alternatively, you can use the `AppleIDSignInOnSuccess` event with the `usePopup` option: -```js -async function signout() { - const { error } = await supabase.auth.signOut() -} +```ts +// Listen for authorization success. +document.addEventListener('AppleIDSignInOnSuccess', async (event) => { + await supabase.auth.signInWithIdToken({ + provider: 'apple', + token: event.data.id_token, + nonce: '' + }) +}) ``` -## Resources +Please make sure you request for the scope `name email` when initializing the library. -- [Apple Developer Account](https://developer.apple.com). -- [Ruby](https://www.ruby-lang.org/en/) Docs. -- [ruby-jwt](https://github.com/jwt/ruby-jwt) library. -- Thanks to [Janak Amarasena](https://medium.com/@janakda) who did all the heavy lifting in [How to configure Sign In with Apple](https://medium.com/identity-beyond-borders/how-to-configure-sign-in-with-apple-77c61e336003). +### Configuration + +To use Sign in with Apple JS you need to configure these options: + +1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._) +2. Obtain a **Services ID** attached to the App ID that uniquely identifies the website. Use this value as the client ID when initializing Sign in with Apple JS. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.website`. +3. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your website is hosted on. The redirect URL must also point to a page on your website that will receive the callback from Apple. +4. Register the Services ID you created to your project's [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. + +Note that if you're using Sign in with Apple JS you do not need to configure the OAuth settings. export const Page = ({ children }) => From 7ddf68f73c496a3e67d9a5e6f1ca07fd8ce2622a Mon Sep 17 00:00:00 2001 From: Stojan Dimitrovski Date: Mon, 5 Jun 2023 12:36:10 +0200 Subject: [PATCH 2/9] docs: revamp Sign in with Google docs --- .../guides/auth/social-login/auth-google.mdx | 272 ++++++++++++------ 1 file changed, 184 insertions(+), 88 deletions(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/pages/guides/auth/social-login/auth-google.mdx index f4afe453b52..83a30b49d6e 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-google.mdx @@ -3,119 +3,215 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { id: 'auth-google', title: 'Login with Google', - description: 'Add Google OAuth to your Supabase project', + description: 'Use Sign in with Google on the web, in native apps or with Chrome extensions', } -To enable Google Auth for your project, you need to set up a Google OAuth application and add the application credentials to your Supabase Dashboard. +Supabase Auth supports Sign in with Google on the web, native Android applications and Chrome extensions. ## Overview -Setting up Google logins for your application consists of 3 parts: +To support Sign in with Google you need to configure the [Google provider in the Supabase dashboard]() for your project. -- Create and configure a Google Project on the [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard) -- Add your Google OAuth keys to your [Supabase Project](https://app.supabase.com) -- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js) +There are three general ways to use Sign in with Google, depending on the application you're building: -## Access your Google Cloud Platform account +- Sign in on the web or in web-based apps + - Using an OAuth flow initiated by Supabase Auth using [Google Identity Authorization with OAuth 2.0 for Web Server Applications](https://developers.google.com/identity/protocols/oauth2/web-server). + - Using a [personalized sign-in button](https://developers.google.com/identity/gsi/web/guides/personalized-button) or [One Tap](https://developers.google.com/identity/gsi/web/guides/display-google-one-tap) and [automatic sign-in](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out) for users already logged in to their Google account. +- Sign in in native Android apps and Chrome extensions -- Go to [cloud.google.com](https://cloud.google.com). -- Click on `Sign in` at the top right to log in. +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. -![Google Developer Portal.](/docs/img/guides/auth-google/google-portal.png) +Before you can use Sign in with Google, you need to obtain a [Google Cloud Platform](https://console.cloud.google.com/home/dashboard) account and have a project ready or create a new one. -## Create a Google Cloud Platform Project +## Using the OAuth flow for the web -- Click on `Select a Project` at the top left. - - (Or, if a project is currently selected, click on the current project name at the top left.) -- Click `New Project` at the top right. -- Fill in your app information, then click `Create`. - - (This can take a few minutes.) -- This should bring you to the dashboard for your new project. +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. -## Create the OAuth Keys for your project +Behind the scenes, Supabase Auth uses the [Google OAuth 2.0 APIs](https://developers.google.com/identity/openid-connect/openid-connect), which are OpenID Connect certified, to perform the authentication. -From your project's dashboard screen: +To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library: -- In the search bar at the top labeled `Search products and resources` type `OAuth`. -- Click on `OAuth consent screen` from the list of results. -- On the `OAuth consent screen` page select `External`. -- Click `Create`. - -## Edit your app information - -- On the `Edit app registration` page fill out your app information. -- Click `Save and continue` at the bottom. - -## Find your callback URL - - - -## Create your Google credentials - -- Click `Credentials` at the left to go to the `Credentials` page on the Google Cloud Platform console. -- Click `Create Credentials` near the top then select `OAuth client ID` -- On the `Create OAuth client ID` page, select your application type. If you're not sure, choose `Web application`. -- Fill in your app name. -- At the bottom, under `Authorized redirect URIs` click `Add URI`. -- Enter your callback URI under `Authorized redirect URIs` at the bottom. -- Enter your callback URI in the `Valid OAuth Redirect URIs` box. -- Click `Save Changes` at the bottom right. -- Click `Create`. - -Copy your new OAuth credentials - -- A box will appear called `OAuth client created`. -- Copy and save the values under `Your Client ID` and `Your Client Secret`. - -## Enter your Google credentials into your Supabase Project - - - -## Add login code to your client app - -When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `google` as the `provider`: - -```js -async function signInWithGoogle() { - const { data, error } = await supabase.auth.signInWithOAuth({ - provider: 'google', - }) -} +```ts +supabase.auth.signInWithOAuth({ + provider: 'google', +}) ``` -You can view the full list of query parameters and their descriptions [here](https://developers.google.com/identity/protocols/oauth2/web-server#creatingclient). +This call takes the user to Google's consent screen. When the flow ends, the user's profile information is exchanegd and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session. -When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage: +You can additionally extract the `provider_token` from the session (on initial login only) which is the OAuth 2.0 access token issued by Google that grants your application access to the Google services for the authenticated users. Please store this token in local storage, cookies or in your database or server. -```js -async function signout() { - const { error } = await supabase.auth.signOut() -} -``` +Google does not send out a refresh token by default, so you will need to pass parameters like these to `signInWithOAuth()` in order to extract the `provider_refresh_token`: -## Obtain the provider refresh token - -Google OAuth2.0 doesn't return the `provider_refresh_token` by default. If you need the `provider_refresh_token` returned, you will need to add additional query parameters: - -```js -async function signInWithGoogle() { - const { data, error } = await supabase.auth.signInWithOAuth({ - provider: 'google', - options: { - queryParams: { - access_type: 'offline', - prompt: 'consent', - }, +```ts +const { data, error } = await supabase.auth.signInWithOAuth({ + provider: 'google', + options: { + queryParams: { + access_type: 'offline', + prompt: 'consent', }, + }, +}) +``` + +### 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](https://console.developers.google.com/apis/credentials) page of the console. When creating a new credential, choose _Web application_. In _Authorized redirect URIs_ enter `https://.supabase.co/auth/v1/callback`. This URL will be seen by your users, and you can customize it by configuring [custom domains](/docs/guides/platform/custom-domains). +2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. Within _Authorized domains_ make sure you add your Supabase project's domain `.supabase.co`. 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. In those cases, it's best to use [custom domains](/docs/guides/platform/custom-domains). +3. Finally, add the client ID and secret from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers). + +## Using native sign in + +Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Google flow on Android uses the [operating system's built-in functionalities](https://developers.google.com/android/reference/com/google/android/gms/auth/api/identity/package-summary) to prompt the user for consent. Note that native sign-in has been rebranded as _One Tap sign-in on Android_ by Google, which you should not confuse with _One Tap sign in for web_, as mentioned below. + +When the user provides consent, Google issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth. + +If you're building an Android app using Flutter, you can use `signInWithGoogle()` to quickly get the user's consent and sign them in to your Supabase project: + +```dart +final AuthResponse = await supabase.auth.signInWithGoogle(); +``` + +In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so: + +```ts +await supabase.auth.signInWithIdToken({ + provider: 'google', + token: '', + access_token: '' +}) +``` + +Please take a look at these open-source projects which may help you obtain an ID token directly from the OS: + +- [react-native-google-signin/google-signin](https://github.com/react-native-google-signin/google-signin). + +For apps written in Kotlin, please consult the [community maintained library](/docs/reference/kotlin/introduction). + +### Configuration + +1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Android_ for the application type. Use the instructions on screen to provide the SHA-1 certificate fingerprint used to sign your Android app. +2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service. +3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_. + +Note that you do not have to configure the OAuth flow in order to use native sign in. + +## Using native sign in for Chrome extensions + +Similar to the native sign in for Android, you can use the Chrome browser's [identity APIs](https://developer.chrome.com/docs/extensions/reference/identity/) to launch an authentication flow. + +First, you need to configure your `manifest.json` file like so: + +```json +{ + "permissions": [ + "identity" + ], + "oauth2": { + "client_id": "", + "scopes": [ + "openid", "email", "profile" + ] + } +} +``` + +Then you should call the [`chrome.identity.launchWebAuthFlow()`](https://developer.chrome.com/docs/extensions/reference/identity/#method-launchWebAuthFlow) function to trigger the sign in flow. On success, call the `supabase.auth.signInWithIdToken()` function to complete sign in with your Supabase project. + +```ts +const manifest = chrome.runtime.getManifest() + +const url = new URL('https://accounts.google.com/o/oauth2/auth') + +url.searchParams.set('client_id', manifest.oauth2.client_id) +url.searchParams.set('response_type', 'id_token') +url.searchParams.set('access_type', 'offline') +url.searchParams.set('redirect_uri', `https://${chrome.runtime.id}.chromiumapp.org`) +url.searchParams.set('scope', manifest.oauth2.scopes.join(' ')) + +chrome.identity.launchWebAuthFlow({ + url: url.href, + interactive: true, +}, async (redirectedTo) => { + if (chrome.runtime.lastError) { + // auth was not successful + } else { + // auth was successful, extract the ID token from the redirectedTo URL + const url = new URL(redirectedTo) + const params = new URLSearchParams(url.hash) + + const { data, error } = await supabase.auth.signInWithIdToken({ + provider: 'google', + token: params.get('id_token'), + }) + } +}) +``` + +### Configuration + +You will need to configure a client ID for your Chrome extension: + +1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Chrome extension_ for the application type. For _Item ID_ provide the unique ID of your Chrome extension. You can get this by calling `chrome.runtime.id` within the extension, or from the Web Store URL of the extension. For example, the [Google Translate extension](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb) has the Web Store URL `https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb` and the last part `aapbdbdomjkkjkaonfhkkikfgjllcleb` is its unique ID. +2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. +3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_. + +Note that you do not have to configure the OAuth flow in order to use sign in with Chrome extensions. + +## Using personalized sign-in buttons, One Tap or automatic sign-in + +Most web apps and websites can utilize Google's [personalized sign-in buttons](https://developers.google.com/identity/gsi/web/guides/personalized-button), [One Tap](https://developers.google.com/identity/gsi/web/guides/features) or [automatic sign-in](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out) for the best user experience. + +Under the hood, these sign in methods end with an identity token being issued by [Sign in with Google for Web](https://developers.google.com/identity/gsi/web/guides/overview). You can then use the `supabase.auth.signInWithIdToken()` method to immediately issue an access and refresh tokens for the user, without needing to build any additional UIs or flows. + +To get started, you can use the [HTML Code Generator](https://developers.google.com/identity/gsi/web/tools/configurator) to customize the look, feel, features and behavior of the Sign in with Google button. Make sure you pick the _Swap to JavaScript callback_ option and name the function that will receive a [`CredentialResponse`](https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse) when sign in completes. + +For example, this HTML code shows a typical Sign in with Google button: + +```html +
+
+ + +``` + +When the user signs in, the `handleSignInWithGoogle` function will be called: + +```ts +async function handleSignInWithGoogle(response) { + const { data, error } = await supabase.auth.signInWithIdToken({ + token: response.credential, + nonce: 'NONCE', // must be the same one as provided in data-nonce (if any) }) } ``` -## Resources +Use of nonce is recommended, though optional. Make sure each nonce is generated randomly and available both in the `data-nonce` attribute as well as in the `handleSignInWithGoogle` callback function; otherwise the ID token will not be accepted. -- [Supabase Account - Free Tier OK](https://supabase.com) -- [Supabase JS Client](https://github.com/supabase/supabase-js) -- [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard) +### Configuration + +1. Obtain OAuth credentials for your Google Cloud project in the [Credentials](https://console.developers.google.com/apis/credentials) page of the console. When creating a new credential, choose _Web application_. As you're using the Google sign in button, you should configure the _Authorized JavaScript origins_ and _Authorized redirect URIs_ to the website where the buttons appear. You should not use your Supabase project domain name. For this use case, the client secret provided is not needed and can be ignored. +2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service. +3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. + +Note that you do not have to configure the OAuth flow client ID and secret when using this approach! export const Page = ({ children }) => From 996f7bb3fcd3617bf3ce21ee069bd18df33e45ee Mon Sep 17 00:00:00 2001 From: Stojan Dimitrovski Date: Thu, 22 Jun 2023 12:02:32 +0200 Subject: [PATCH 3/9] docs: adjust wording per suggestions from Tyler --- .../pages/guides/auth/social-login/auth-google.mdx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/pages/guides/auth/social-login/auth-google.mdx index 83a30b49d6e..fea9733b444 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-google.mdx @@ -93,11 +93,13 @@ For apps written in Kotlin, please consult the [community maintained library](/d ### Configuration -1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Android_ for the application type. Use the instructions on screen to provide the SHA-1 certificate fingerprint used to sign your Android app. +1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Android_ or _iOS_ depending on the mobile operating system your app is built for. + - For Android, use the instructions on screen to provide the SHA-1 certificate fingerprint used to sign your Android app. + - For iOS, use the instructions on screen to provide the app Bundle ID, and App Store ID and Team ID if the app is already published on the Apple AppStore. 2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service. 3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_. -Note that you do not have to configure the OAuth flow in order to use native sign in. +Note that you do not have to configure the OAuth flow in the Supabase Dashboard in order to use native sign in. ## Using native sign in for Chrome extensions @@ -159,7 +161,7 @@ You will need to configure a client ID for your Chrome extension: 2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. 3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_. -Note that you do not have to configure the OAuth flow in order to use sign in with Chrome extensions. +Note that you do not have to configure the OAuth flow in the Supabase Dashboard to sign in with Google inside Chrome extensions. ## Using personalized sign-in buttons, One Tap or automatic sign-in @@ -211,7 +213,7 @@ Use of nonce is recommended, though optional. Make sure each nonce is generated 2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service. 3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_. -Note that you do not have to configure the OAuth flow client ID and secret when using this approach! +Note that you do not have to configure the OAuth flow client ID and secret in the Supabae Dashboard when using this approach! export const Page = ({ children }) => From f70d729b58dbd13aa8388d4cba42c134f672ef05 Mon Sep 17 00:00:00 2001 From: Stojan Dimitrovski Date: Fri, 23 Jun 2023 15:49:55 +0200 Subject: [PATCH 4/9] apply suggestion from @dshukertjr Co-authored-by: Tyler <18113850+dshukertjr@users.noreply.github.com> --- apps/docs/pages/guides/auth/social-login/auth-google.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/pages/guides/auth/social-login/auth-google.mdx index fea9733b444..5df70ee52c9 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-google.mdx @@ -69,7 +69,7 @@ Unlike the OAuth flow which requires the use of a web browser, the native Sign i When the user provides consent, Google issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth. -If you're building an Android app using Flutter, you can use `signInWithGoogle()` to quickly get the user's consent and sign them in to your Supabase project: +If you are building a Flutter app, you can use [flutter_appauth](https://pub.dev/packages/flutter_appauth) package to sign a user into your Supabase project: ```dart final AuthResponse = await supabase.auth.signInWithGoogle(); From 0c471f490b815a3557721ceafbfd34ea4c940a53 Mon Sep 17 00:00:00 2001 From: Tyler <18113850+dshukertjr@users.noreply.github.com> Date: Tue, 27 Jun 2023 08:48:38 +0900 Subject: [PATCH 5/9] Update apps/docs/pages/guides/auth/social-login/auth-google.mdx --- .../guides/auth/social-login/auth-google.mdx | 72 ++++++++++++++++++- 1 file changed, 70 insertions(+), 2 deletions(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/pages/guides/auth/social-login/auth-google.mdx index 5df70ee52c9..e7d2158f538 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-google.mdx @@ -72,8 +72,76 @@ When the user provides consent, Google issues an identity token (commonly abbrev If you are building a Flutter app, you can use [flutter_appauth](https://pub.dev/packages/flutter_appauth) package to sign a user into your Supabase project: ```dart -final AuthResponse = await supabase.auth.signInWithGoogle(); -``` +import 'package:crypto/crypto.dart'; +import 'package:flutter_appauth/flutter_appauth.dart'; + +// Generate a random string +final rawNonce = generateRandomString(); +final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString(); + +// Your registered Google client ID here. +// This will be different for iOS and Android +const clientId = 'YOUR_GOODLE_CLIENT_ID'; + +// bundle ID for iOS, package name for Android here +final packageName = 'io.supabase.example'; + +/// fixed for google login +final redirectUrl = '$packageName:/google_auth'; + +/// fixed for google login +const discoveryUrl = + 'https://accounts.google.com/.well-known/openid-configuration'; + +final appAuth = FlutterAppAuth(); + +// authorize the user by opening the concent page +final result = await appAuth.authorize( + AuthorizationRequest( + clientId, + redirectUrl, + discoveryUrl: discoveryUrl, + nonce: hashedNonce, + scopes: [ + 'openid', + 'email', + ], + ), +); + +if (result == null) { + throw AuthException( + 'Could not find AuthorizationResponse after authorizing'); +} + +// Request the access and id token to google +final tokenResponse = await appAuth.token( + TokenRequest( + clientId, + redirectUrl, + authorizationCode: result.authorizationCode, + discoveryUrl: discoveryUrl, + codeVerifier: result.codeVerifier, + nonce: result.nonce, + scopes: [ + 'openid', + 'email', + ], + ), +); + +final idToken = tokenResponse?.idToken; + +if (idToken == null) { + throw AuthException('Could not find idToken from the token response'); +} + +await signInWithIdToken( + provider: Provider.google, + idToken: idToken, + accessToken: tokenResponse?.accessToken, + nonce: rawNonce, +);``` In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so: From 545ff29c52a3c67d16f57a1e9088edccfd82d9e5 Mon Sep 17 00:00:00 2001 From: Stojan Dimitrovski Date: Tue, 27 Jun 2023 09:54:15 +0200 Subject: [PATCH 6/9] docs: bring back AppleSecretGenerator --- apps/docs/pages/guides/auth/social-login/auth-apple.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx index aac1e9f83a8..792afce7921 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx @@ -1,4 +1,5 @@ import Layout from '~/layouts/DefaultGuideLayout' +import AppleSecretGenerator from '~/components/AppleSecretGenerator' export const meta = { id: 'auth-apple', @@ -49,9 +50,14 @@ You will require the following information: 4. A **Services ID** which uniquely identifies the web services provided by the app you registered in the previous step. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.web`. 5. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your Supabase project is hosted on. This is usually `.supabase.co` while the redirect URL is `https://.supabase.co/auth/v1/callback`. 6. Create a signing **Key** in the [Keys](https://developer.apple.com/account/resources/authkeys/list) section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the `AuthKey_XXXXXXXXXX.p8` file. If you ever loose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring meeting in your calendar! - 7. Finally, add the information you configured above to the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers). + + Use this tool to generate a new Apple client secret. No keys leave your browser! + + + + ## Using native sign in Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Apple flow on iOS, macOS, watchOS or tvOS uses the [operating system's built-in functionalities](https://developer.apple.com/documentation/authenticationservices) to prompt the user for consent. From c45f88ebd2268f06d25adec61e4c467e718db5af Mon Sep 17 00:00:00 2001 From: dshukertjr <18113850+dshukertjr@users.noreply.github.com> Date: Tue, 27 Jun 2023 17:02:43 +0900 Subject: [PATCH 7/9] fix flutter code for native apple login --- .../guides/auth/social-login/auth-apple.mdx | 35 ++++++++++++++++--- 1 file changed, 31 insertions(+), 4 deletions(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx index 792afce7921..2285fbd35ad 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx @@ -64,10 +64,37 @@ Unlike the OAuth flow which requires the use of a web browser, the native Sign i When the user provides consent, Apple issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth. -If you are building an iOS or macOS app using Flutter, you can use `signInWithApple()` to quickly get the user's consent and sign them in to your Supabase project: +If you are building an iOS or macOS app using Flutter, you can use [apple_sign_in](https://pub.dev/packages/sign_in_with_apple) package to quickly get the user's consent and sign them in to your Supabase project: ```dart -final AuthResponse = await supabase.auth.signInWithApple(); +import 'package:sign_in_with_apple/sign_in_with_apple.dart'; +import 'package:crypto/crypto.dart'; + +Future signInWithApple() { + + // Generate a random string + final rawNonce = _generateRandomString(); + final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString(); + + final credential = await SignInWithApple.getAppleIDCredential( + scopes: [ + AppleIDAuthorizationScopes.email, + AppleIDAuthorizationScopes.fullName, + ], + nonce: hashedNonce, + ); + + final idToken = credential.identityToken; + if (idToken == null) { + throw 'Could not find ID Token from generated credential.'; + } + + return signInWithIdToken( + provider: Provider.apple, + idToken: idToken, + nonce: rawNonce, + ); +} ``` In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so: @@ -108,7 +135,7 @@ function signIn() { await supabase.auth.signInWithIdToken({ provider: 'apple', token: data.id_token, - nonce: '' + nonce: '', }) } ``` @@ -121,7 +148,7 @@ document.addEventListener('AppleIDSignInOnSuccess', async (event) => { await supabase.auth.signInWithIdToken({ provider: 'apple', token: event.data.id_token, - nonce: '' + nonce: '', }) }) ``` From 7a42725bc7541167d3a1158576cc6786e2d30a0f Mon Sep 17 00:00:00 2001 From: Stojan Dimitrovski Date: Tue, 27 Jun 2023 10:05:48 +0200 Subject: [PATCH 8/9] docs: add missing link --- apps/docs/pages/guides/auth/social-login/auth-google.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/pages/guides/auth/social-login/auth-google.mdx index e7d2158f538..133cff4b037 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-google.mdx @@ -10,7 +10,7 @@ Supabase Auth supports Sign in with Google on the web, native Android applicatio ## Overview -To support Sign in with Google you need to configure the [Google provider in the Supabase dashboard]() for your project. +To support Sign in with Google you need to configure the [Google provider in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) for your project. There are three general ways to use Sign in with Google, depending on the application you're building: From ba9c094a0476328e3c7bf3f2166d61951634ded3 Mon Sep 17 00:00:00 2001 From: Stojan Dimitrovski Date: Tue, 27 Jun 2023 10:19:19 +0200 Subject: [PATCH 9/9] docs: update prettier --- .../guides/auth/social-login/auth-apple.mdx | 1 - .../guides/auth/social-login/auth-google.mdx | 94 ++++++++++--------- 2 files changed, 48 insertions(+), 47 deletions(-) diff --git a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx index 9f7c97eea85..2285fbd35ad 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-apple.mdx @@ -52,7 +52,6 @@ You will require the following information: 6. Create a signing **Key** in the [Keys](https://developer.apple.com/account/resources/authkeys/list) section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the `AuthKey_XXXXXXXXXX.p8` file. If you ever loose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring meeting in your calendar! 7. Finally, add the information you configured above to the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers). - Use this tool to generate a new Apple client secret. No keys leave your browser! diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/pages/guides/auth/social-login/auth-google.mdx index d9f8b64d54a..164306f722b 100644 --- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx +++ b/apps/docs/pages/guides/auth/social-login/auth-google.mdx @@ -60,8 +60,8 @@ const { data, error } = await supabase.auth.signInWithOAuth({ 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](https://console.developers.google.com/apis/credentials) page of the console. When creating a new credential, choose _Web application_. In _Authorized redirect URIs_ enter `https://.supabase.co/auth/v1/callback`. This URL will be seen by your users, and you can customize it by configuring [custom domains](/docs/guides/platform/custom-domains). -2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. Within _Authorized domains_ make sure you add your Supabase project's domain `.supabase.co`. 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. In those cases, it's best to use [custom domains](/docs/guides/platform/custom-domains). -3. Finally, add the client ID and secret from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers). +2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. Within _Authorized domains_ make sure you add your Supabase project's domain `.supabase.co`. 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. In those cases, it's best to use [custom domains](/docs/guides/platform/custom-domains). +3. Finally, add the client ID and secret from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers). ## Using native sign in @@ -71,7 +71,7 @@ When the user provides consent, Google issues an identity token (commonly abbrev If you are building a Flutter app, you can use [flutter_appauth](https://pub.dev/packages/flutter_appauth) package to sign a user into your Supabase project: -```dart +````dart import 'package:crypto/crypto.dart'; import 'package:flutter_appauth/flutter_appauth.dart'; @@ -79,7 +79,7 @@ import 'package:flutter_appauth/flutter_appauth.dart'; final rawNonce = generateRandomString(); final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString(); -// Your registered Google client ID here. +// Your registered Google client ID here. // This will be different for iOS and Android const clientId = 'YOUR_GOODLE_CLIENT_ID'; @@ -151,7 +151,7 @@ await supabase.auth.signInWithIdToken({ token: '', access_token: '' }) -``` +```` Please take a look at these open-source projects which may help you obtain an ID token directly from the OS: @@ -162,8 +162,10 @@ For apps written in Kotlin, please consult the [community maintained library](/d ### Configuration 1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Android_ or _iOS_ depending on the mobile operating system your app is built for. - - For Android, use the instructions on screen to provide the SHA-1 certificate fingerprint used to sign your Android app. - - For iOS, use the instructions on screen to provide the app Bundle ID, and App Store ID and Team ID if the app is already published on the Apple AppStore. + +- For Android, use the instructions on screen to provide the SHA-1 certificate fingerprint used to sign your Android app. +- For iOS, use the instructions on screen to provide the app Bundle ID, and App Store ID and Team ID if the app is already published on the Apple AppStore. + 2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service. 3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_. @@ -177,14 +179,10 @@ First, you need to configure your `manifest.json` file like so: ```json { - "permissions": [ - "identity" - ], + "permissions": ["identity"], "oauth2": { "client_id": "", - "scopes": [ - "openid", "email", "profile" - ] + "scopes": ["openid", "email", "profile"] } } ``` @@ -202,23 +200,26 @@ url.searchParams.set('access_type', 'offline') url.searchParams.set('redirect_uri', `https://${chrome.runtime.id}.chromiumapp.org`) url.searchParams.set('scope', manifest.oauth2.scopes.join(' ')) -chrome.identity.launchWebAuthFlow({ - url: url.href, - interactive: true, -}, async (redirectedTo) => { - if (chrome.runtime.lastError) { - // auth was not successful - } else { - // auth was successful, extract the ID token from the redirectedTo URL - const url = new URL(redirectedTo) - const params = new URLSearchParams(url.hash) +chrome.identity.launchWebAuthFlow( + { + url: url.href, + interactive: true, + }, + async (redirectedTo) => { + if (chrome.runtime.lastError) { + // auth was not successful + } else { + // auth was successful, extract the ID token from the redirectedTo URL + const url = new URL(redirectedTo) + const params = new URLSearchParams(url.hash) - const { data, error } = await supabase.auth.signInWithIdToken({ - provider: 'google', - token: params.get('id_token'), - }) + const { data, error } = await supabase.auth.signInWithIdToken({ + provider: 'google', + token: params.get('id_token'), + }) + } } -}) +) ``` ### Configuration @@ -242,24 +243,26 @@ To get started, you can use the [HTML Code Generator](https://developers.google. For example, this HTML code shows a typical Sign in with Google button: ```html -
-
+
- + ``` When the user signs in, the `handleSignInWithGoogle` function will be called: @@ -269,7 +272,6 @@ async function handleSignInWithGoogle(response) { const { data, error } = await supabase.auth.signInWithIdToken({ token: response.credential, nonce: 'NONCE', // must be the same one as provided in data-nonce (if any) - }) } ```