From cb07f0bb65c3374b9c08001b0c574c8dc741f01f Mon Sep 17 00:00:00 2001 From: Nemi Shah Date: Tue, 21 Nov 2023 14:36:36 +0530 Subject: [PATCH] Refactor based on PR comments --- v2/thirdparty/custom-ui/thirdparty-login.mdx | 50 +++++++------------ .../custom-ui/thirdparty-login.mdx | 50 +++++++------------ .../custom-ui/thirdparty-login.mdx | 50 +++++++------------ 3 files changed, 54 insertions(+), 96 deletions(-) diff --git a/v2/thirdparty/custom-ui/thirdparty-login.mdx b/v2/thirdparty/custom-ui/thirdparty-login.mdx index ca551e658..f007265b9 100644 --- a/v2/thirdparty/custom-ui/thirdparty-login.mdx +++ b/v2/thirdparty/custom-ui/thirdparty-login.mdx @@ -371,7 +371,7 @@ fileprivate class ViewController: UIViewController, ASAuthorizationControllerPre

Step 1) Fetching the authorisation token on the frontend

-For flutter we use the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the apple sign in flow. You can see a full example of this in [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart#L130). +For flutter we use the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the apple sign in flow. You can see a full example of this in the `loginWithApple` function in [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). ```dart import 'package:sign_in_with_apple/sign_in_with_apple.dart'; @@ -675,7 +675,7 @@ export const performGoogleSignIn = async (): Promise => {

Step 1) Fetching the authorisation token on the frontend

-Follow the official Google Sign In guide to set up their library and sign the user in with Google. Fetch the authorization code from the google sign in result. For a full example refer to [our example app](https://github.com/supertokens/supertokens-android/blob/master/examples/with-thirdparty/app/src/main/java/com/supertokens/supertokensexample/LoginActivity.kt#L62). +Follow the [official Google Sign In guide](https://developers.google.com/identity/sign-in/android/start-integrating) to set up their library and sign the user in with Google. Fetch the authorization code from the google sign in result. For a full example refer to the `signInWithGoogle` function in [our example app](https://github.com/supertokens/supertokens-android/blob/master/examples/with-thirdparty/app/src/main/java/com/supertokens/supertokensexample/LoginActivity.kt). ```kotlin import androidx.activity.result.ActivityResult @@ -727,7 +727,7 @@ class LoginActivity : AppCompatActivity() {

Step 1) Fetching the authorisation token on the frontend

-For iOS we use the `GoogleSignIn` library, follow the [official guide](https://developers.google.com/identity/sign-in/ios/start-integrating) to set up the library and sign the user in with Google. Use the result of google sign in to get the authorization code. For a full example refer to [our example app](https://github.com/supertokens/supertokens-ios/blob/master/examples/with-thirdparty/with-thirdparty/LoginScreen/LoginScreenViewController.swift). +For iOS we use the `GoogleSignIn` library, follow the [official guide](https://developers.google.com/identity/sign-in/ios/start-integrating) to set up the library and sign the user in with Google. Use the result of google sign in to get the authorization code. For a full example refer to the `onGoogleCliked` function in [our example app](https://github.com/supertokens/supertokens-ios/blob/master/examples/with-thirdparty/with-thirdparty/LoginScreen/LoginScreenViewController.swift). ```swift import UIKit @@ -755,7 +755,7 @@ fileprivate class LoginScreenViewController: UIViewController {

Step 1) Fetching the authorisation token on the frontend

-For flutter we use the [google_sign_in](https://pub.dev/packages/google_sign_in) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the google sign in flow. For a full example refer to [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). +For flutter we use the [google_sign_in](https://pub.dev/packages/google_sign_in) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the google sign in flow. For a full example refer to the `loginWithGoogle` in [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). ```dart import 'package:google_sign_in/google_sign_in.dart'; @@ -814,30 +814,19 @@ curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signinup' \ --header 'rid: ^{codeImportRecipeName}' \ --header 'Content-Type: application/json; charset=utf-8' \ --data-raw '{ - "thirdPartyId": "apple", + "thirdPartyId": "google", "clientType": "...", "redirecURIInfo": { - "redirectURIOnProviderDashboard": "^{form_apiDomain}^{form_apiBasePath}/callback/apple", + "redirectURIOnProviderDashboard": "", "redirectURIQueryParams": { "code": "...", - "user": { - "name":{ - "firstName":"...", - "lastName":"..." - }, - "email":"..." - } } } }' ``` :::important -- On iOS, the client id set in the backend should be the same as the bundle identifier for your app. -- The `clientType` input is optional, and is required only if you have initialised more than one client in the provide on the backend (See the "Social / SSO login for both, web and mobile apps" section below). -- On iOS, `redirectURIOnProviderDashboard` doesn't matter and its value can be a universal link configured for your app. -- On Android, the `redirectURIOnProviderDashboard` should match the one configured on the Apple developer dashboard. -- The `user` object contains information provided by Apple. +When calling the API exposed by the SuperTokens backend SDK, we pass an empty string for `redirectURIOnProviderDashboard` because we use the native login flow using the authorization code which does not involve any redirection on the frontend. ::: The response body from the API call has a `status` property in it: @@ -862,9 +851,7 @@ This is similar to flow 1a, except that you do **not** need to provide a client

Step 1) Fetching the authorisation token on the frontend

-See the setup step for this in flow 1a. In addition to that, you need to configure the [react native auth library](https://github.com/invertase/react-native-app-auth) to also return the PKCE code verifier along with the authorization code. This can be done by setting the `usePKCE` boolean to `true` and also by setting the `skipCodeExchange` to `true` when configuring the react native auth library. - -The minimum scope that is required by SuperTokens is one that gives you the user's email - in case of Google login, it is `"https://www.googleapis.com/auth/userinfo.email"`. +You can use the [react native auth library](https://github.com/FormidableLabs/react-native-app-auth) to also return the PKCE code verifier along with the authorization code. This can be done by setting the `usePKCE` boolean to `true` and also by setting the `skipCodeExchange` to `true` when configuring the react native auth library. @@ -872,7 +859,7 @@ The minimum scope that is required by SuperTokens is one that gives you the user

Step 1) Fetching the authorisation token on the frontend

-You can follow the [official guide](https://developers.google.com/identity/protocols/oauth2/native-app) on how to use the PKCE flow with google sign in on Android +You can use the [AppAuth-Android](https://github.com/openid/AppAuth-Android) library to use the PKCE flow by using the `setCodeVerifier` method when creating a `AuthorizationRequest`. @@ -880,7 +867,7 @@ You can follow the [official guide](https://developers.google.com/identity/proto

Step 1) Fetching the authorisation token on the frontend

-You can follow the [official guide](https://developers.google.com/identity/protocols/oauth2/native-app) on how to use the PKCE flow with google sign in on iOS +You can use the [AppAuth-iOS](https://github.com/openid/AppAuth-iOS) library to use the PKCE flow. @@ -888,7 +875,7 @@ You can follow the [official guide](https://developers.google.com/identity/proto

Step 1) Fetching the authorisation token on the frontend

-You can follow the guide for [flutter_appauth](https://pub.dev/packages/flutter_appauth) on how to use the PKCE flow with google sign in with Flutter +You can use [flutter_appauth](https://pub.dev/packages/flutter_appauth) to use the PKCE flow by providing a `codeVerifier` when you call the `appAuth.token` function. @@ -905,10 +892,10 @@ curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signinup' \ --header 'rid: ^{codeImportRecipeName}' \ --header 'Content-Type: application/json' \ --data-raw '{ - "thirdPartyId": "google", + "thirdPartyId": "THIRD_PARTY_ID", "clientType": "...", "redirectURIInfo": { - "redirectURIOnProviderDashboard": "^{form_apiDomain}^{form_apiBasePath}/callback/google", + "redirectURIOnProviderDashboard": "REDIRECT_URI", "redirectURIQueryParams": { "code": "...", }, @@ -918,9 +905,8 @@ curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signinup' \ ``` :::important -- The `clientType` input is optional, and is required only if you have initialised more than one client in the provide on the backend (See the "Social / SSO login for both, web and mobile apps" section below). -- On iOS, `redirectURIOnProviderDashboard` doesn't matter and its value can be a universal link configured for your app. -- On Android, the `redirectURIOnProviderDashboard` should match the one configured on the Google cloud platform. +- Replace `THIRD_PARTY_ID` with the provider id. The provider id must match the one you configure in the backend when intialising SuperTokens. +- `REDIRECT_URI` must exactly match the value you configure on the providers dashboard. ::: The response body from the API call has a `status` property in it: @@ -942,11 +928,11 @@ On success, the backend will send back session tokens as part of the response he

Step 1) Fetching the OAuth / access tokens on the frontend

1. Sign in with the social provider. The minimum required scope is the one that provides access to the user's email. You can use any library to sign in with the social provider. -2. Get the access token on the frontend. +2. Get the access token on the frontend if it is available. 3. Get the id token from the sign in result if it is available. -:::info -If you are using a social provider that does not provide an access token on the frontend you can use "Flow 1a" in these docs instead. +:::important +You need to provide either the access token or the id token in step 2, depending on what is available. Only one of the tokens are required and not both. :::

Step 2) Calling the signinup API to use the OAuth tokens

diff --git a/v2/thirdpartyemailpassword/custom-ui/thirdparty-login.mdx b/v2/thirdpartyemailpassword/custom-ui/thirdparty-login.mdx index 3df93f51b..ec586b1c7 100644 --- a/v2/thirdpartyemailpassword/custom-ui/thirdparty-login.mdx +++ b/v2/thirdpartyemailpassword/custom-ui/thirdparty-login.mdx @@ -374,7 +374,7 @@ fileprivate class ViewController: UIViewController, ASAuthorizationControllerPre

Step 1) Fetching the authorisation token on the frontend

-For flutter we use the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the apple sign in flow. You can see a full example of this in [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart#L130). +For flutter we use the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the apple sign in flow. You can see a full example of this in the `loginWithApple` function in [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). ```dart import 'package:sign_in_with_apple/sign_in_with_apple.dart'; @@ -678,7 +678,7 @@ export const performGoogleSignIn = async (): Promise => {

Step 1) Fetching the authorisation token on the frontend

-Follow the official Google Sign In guide to set up their library and sign the user in with Google. Fetch the authorization code from the google sign in result. For a full example refer to [our example app](https://github.com/supertokens/supertokens-android/blob/master/examples/with-thirdparty/app/src/main/java/com/supertokens/supertokensexample/LoginActivity.kt#L62). +Follow the [official Google Sign In guide](https://developers.google.com/identity/sign-in/android/start-integrating) to set up their library and sign the user in with Google. Fetch the authorization code from the google sign in result. For a full example refer to the `signInWithGoogle` function in [our example app](https://github.com/supertokens/supertokens-android/blob/master/examples/with-thirdparty/app/src/main/java/com/supertokens/supertokensexample/LoginActivity.kt). ```kotlin import androidx.activity.result.ActivityResult @@ -730,7 +730,7 @@ class LoginActivity : AppCompatActivity() {

Step 1) Fetching the authorisation token on the frontend

-For iOS we use the `GoogleSignIn` library, follow the [official guide](https://developers.google.com/identity/sign-in/ios/start-integrating) to set up the library and sign the user in with Google. Use the result of google sign in to get the authorization code. For a full example refer to [our example app](https://github.com/supertokens/supertokens-ios/blob/master/examples/with-thirdparty/with-thirdparty/LoginScreen/LoginScreenViewController.swift). +For iOS we use the `GoogleSignIn` library, follow the [official guide](https://developers.google.com/identity/sign-in/ios/start-integrating) to set up the library and sign the user in with Google. Use the result of google sign in to get the authorization code. For a full example refer to the `onGoogleCliked` function in [our example app](https://github.com/supertokens/supertokens-ios/blob/master/examples/with-thirdparty/with-thirdparty/LoginScreen/LoginScreenViewController.swift). ```swift import UIKit @@ -758,7 +758,7 @@ fileprivate class LoginScreenViewController: UIViewController {

Step 1) Fetching the authorisation token on the frontend

-For flutter we use the [google_sign_in](https://pub.dev/packages/google_sign_in) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the google sign in flow. For a full example refer to [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). +For flutter we use the [google_sign_in](https://pub.dev/packages/google_sign_in) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the google sign in flow. For a full example refer to the `loginWithGoogle` in [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). ```dart import 'package:google_sign_in/google_sign_in.dart'; @@ -817,30 +817,19 @@ curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signinup' \ --header 'rid: ^{codeImportRecipeName}' \ --header 'Content-Type: application/json; charset=utf-8' \ --data-raw '{ - "thirdPartyId": "apple", + "thirdPartyId": "google", "clientType": "...", "redirecURIInfo": { - "redirectURIOnProviderDashboard": "^{form_apiDomain}^{form_apiBasePath}/callback/apple", + "redirectURIOnProviderDashboard": "", "redirectURIQueryParams": { "code": "...", - "user": { - "name":{ - "firstName":"...", - "lastName":"..." - }, - "email":"..." - } } } }' ``` :::important -- On iOS, the client id set in the backend should be the same as the bundle identifier for your app. -- The `clientType` input is optional, and is required only if you have initialised more than one client in the provide on the backend (See the "Social / SSO login for both, web and mobile apps" section below). -- On iOS, `redirectURIOnProviderDashboard` doesn't matter and its value can be a universal link configured for your app. -- On Android, the `redirectURIOnProviderDashboard` should match the one configured on the Apple developer dashboard. -- The `user` object contains information provided by Apple. +When calling the API exposed by the SuperTokens backend SDK, we pass an empty string for `redirectURIOnProviderDashboard` because we use the native login flow using the authorization code which does not involve any redirection on the frontend. ::: The response body from the API call has a `status` property in it: @@ -865,9 +854,7 @@ This is similar to flow 1a, except that you do **not** need to provide a client

Step 1) Fetching the authorisation token on the frontend

-See the setup step for this in flow 1a. In addition to that, you need to configure the [react native auth library](https://github.com/invertase/react-native-app-auth) to also return the PKCE code verifier along with the authorization code. This can be done by setting the `usePKCE` boolean to `true` and also by setting the `skipCodeExchange` to `true` when configuring the react native auth library. - -The minimum scope that is required by SuperTokens is one that gives you the user's email - in case of Google login, it is `"https://www.googleapis.com/auth/userinfo.email"`. +You can use the [react native auth library](https://github.com/FormidableLabs/react-native-app-auth) to also return the PKCE code verifier along with the authorization code. This can be done by setting the `usePKCE` boolean to `true` and also by setting the `skipCodeExchange` to `true` when configuring the react native auth library. @@ -875,7 +862,7 @@ The minimum scope that is required by SuperTokens is one that gives you the user

Step 1) Fetching the authorisation token on the frontend

-You can follow the [official guide](https://developers.google.com/identity/protocols/oauth2/native-app) on how to use the PKCE flow with google sign in on Android +You can use the [AppAuth-Android](https://github.com/openid/AppAuth-Android) library to use the PKCE flow by using the `setCodeVerifier` method when creating a `AuthorizationRequest`. @@ -883,7 +870,7 @@ You can follow the [official guide](https://developers.google.com/identity/proto

Step 1) Fetching the authorisation token on the frontend

-You can follow the [official guide](https://developers.google.com/identity/protocols/oauth2/native-app) on how to use the PKCE flow with google sign in on iOS +You can use the [AppAuth-iOS](https://github.com/openid/AppAuth-iOS) library to use the PKCE flow. @@ -891,7 +878,7 @@ You can follow the [official guide](https://developers.google.com/identity/proto

Step 1) Fetching the authorisation token on the frontend

-You can follow the guide for [flutter_appauth](https://pub.dev/packages/flutter_appauth) on how to use the PKCE flow with google sign in with Flutter +You can use [flutter_appauth](https://pub.dev/packages/flutter_appauth) to use the PKCE flow by providing a `codeVerifier` when you call the `appAuth.token` function. @@ -908,10 +895,10 @@ curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signinup' \ --header 'rid: ^{codeImportRecipeName}' \ --header 'Content-Type: application/json' \ --data-raw '{ - "thirdPartyId": "google", + "thirdPartyId": "THIRD_PARTY_ID", "clientType": "...", "redirectURIInfo": { - "redirectURIOnProviderDashboard": "^{form_apiDomain}^{form_apiBasePath}/callback/google", + "redirectURIOnProviderDashboard": "REDIRECT_URI", "redirectURIQueryParams": { "code": "...", }, @@ -921,9 +908,8 @@ curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signinup' \ ``` :::important -- The `clientType` input is optional, and is required only if you have initialised more than one client in the provide on the backend (See the "Social / SSO login for both, web and mobile apps" section below). -- On iOS, `redirectURIOnProviderDashboard` doesn't matter and its value can be a universal link configured for your app. -- On Android, the `redirectURIOnProviderDashboard` should match the one configured on the Google cloud platform. +- Replace `THIRD_PARTY_ID` with the provider id. The provider id must match the one you configure in the backend when intialising SuperTokens. +- `REDIRECT_URI` must exactly match the value you configure on the providers dashboard. ::: The response body from the API call has a `status` property in it: @@ -945,11 +931,11 @@ On success, the backend will send back session tokens as part of the response he

Step 1) Fetching the OAuth / access tokens on the frontend

1. Sign in with the social provider. The minimum required scope is the one that provides access to the user's email. You can use any library to sign in with the social provider. -2. Get the access token on the frontend. +2. Get the access token on the frontend if it is available. 3. Get the id token from the sign in result if it is available. -:::info -If you are using a social provider that does not provide an access token on the frontend you can use "Flow 1a" in these docs instead. +:::important +You need to provide either the access token or the id token in step 2, depending on what is available. Only one of the tokens are required and not both. :::

Step 2) Calling the signinup API to use the OAuth tokens

diff --git a/v2/thirdpartypasswordless/custom-ui/thirdparty-login.mdx b/v2/thirdpartypasswordless/custom-ui/thirdparty-login.mdx index cb69b8817..933e25fce 100644 --- a/v2/thirdpartypasswordless/custom-ui/thirdparty-login.mdx +++ b/v2/thirdpartypasswordless/custom-ui/thirdparty-login.mdx @@ -374,7 +374,7 @@ fileprivate class ViewController: UIViewController, ASAuthorizationControllerPre

Step 1) Fetching the authorisation token on the frontend

-For flutter we use the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the apple sign in flow. You can see a full example of this in [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart#L130). +For flutter we use the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the apple sign in flow. You can see a full example of this in the `loginWithApple` function in [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). ```dart import 'package:sign_in_with_apple/sign_in_with_apple.dart'; @@ -678,7 +678,7 @@ export const performGoogleSignIn = async (): Promise => {

Step 1) Fetching the authorisation token on the frontend

-Follow the official Google Sign In guide to set up their library and sign the user in with Google. Fetch the authorization code from the google sign in result. For a full example refer to [our example app](https://github.com/supertokens/supertokens-android/blob/master/examples/with-thirdparty/app/src/main/java/com/supertokens/supertokensexample/LoginActivity.kt#L62). +Follow the [official Google Sign In guide](https://developers.google.com/identity/sign-in/android/start-integrating) to set up their library and sign the user in with Google. Fetch the authorization code from the google sign in result. For a full example refer to the `signInWithGoogle` function in [our example app](https://github.com/supertokens/supertokens-android/blob/master/examples/with-thirdparty/app/src/main/java/com/supertokens/supertokensexample/LoginActivity.kt). ```kotlin import androidx.activity.result.ActivityResult @@ -730,7 +730,7 @@ class LoginActivity : AppCompatActivity() {

Step 1) Fetching the authorisation token on the frontend

-For iOS we use the `GoogleSignIn` library, follow the [official guide](https://developers.google.com/identity/sign-in/ios/start-integrating) to set up the library and sign the user in with Google. Use the result of google sign in to get the authorization code. For a full example refer to [our example app](https://github.com/supertokens/supertokens-ios/blob/master/examples/with-thirdparty/with-thirdparty/LoginScreen/LoginScreenViewController.swift). +For iOS we use the `GoogleSignIn` library, follow the [official guide](https://developers.google.com/identity/sign-in/ios/start-integrating) to set up the library and sign the user in with Google. Use the result of google sign in to get the authorization code. For a full example refer to the `onGoogleCliked` function in [our example app](https://github.com/supertokens/supertokens-ios/blob/master/examples/with-thirdparty/with-thirdparty/LoginScreen/LoginScreenViewController.swift). ```swift import UIKit @@ -758,7 +758,7 @@ fileprivate class LoginScreenViewController: UIViewController {

Step 1) Fetching the authorisation token on the frontend

-For flutter we use the [google_sign_in](https://pub.dev/packages/google_sign_in) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the google sign in flow. For a full example refer to [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). +For flutter we use the [google_sign_in](https://pub.dev/packages/google_sign_in) package, make sure to follow the prerequisites steps to get the package setup. After setup use the snippet below to trigger the google sign in flow. For a full example refer to the `loginWithGoogle` in [our example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). ```dart import 'package:google_sign_in/google_sign_in.dart'; @@ -817,30 +817,19 @@ curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signinup' \ --header 'rid: ^{codeImportRecipeName}' \ --header 'Content-Type: application/json; charset=utf-8' \ --data-raw '{ - "thirdPartyId": "apple", + "thirdPartyId": "google", "clientType": "...", "redirecURIInfo": { - "redirectURIOnProviderDashboard": "^{form_apiDomain}^{form_apiBasePath}/callback/apple", + "redirectURIOnProviderDashboard": "", "redirectURIQueryParams": { "code": "...", - "user": { - "name":{ - "firstName":"...", - "lastName":"..." - }, - "email":"..." - } } } }' ``` :::important -- On iOS, the client id set in the backend should be the same as the bundle identifier for your app. -- The `clientType` input is optional, and is required only if you have initialised more than one client in the provide on the backend (See the "Social / SSO login for both, web and mobile apps" section below). -- On iOS, `redirectURIOnProviderDashboard` doesn't matter and its value can be a universal link configured for your app. -- On Android, the `redirectURIOnProviderDashboard` should match the one configured on the Apple developer dashboard. -- The `user` object contains information provided by Apple. +When calling the API exposed by the SuperTokens backend SDK, we pass an empty string for `redirectURIOnProviderDashboard` because we use the native login flow using the authorization code which does not involve any redirection on the frontend. ::: The response body from the API call has a `status` property in it: @@ -865,9 +854,7 @@ This is similar to flow 1a, except that you do **not** need to provide a client

Step 1) Fetching the authorisation token on the frontend

-See the setup step for this in flow 1a. In addition to that, you need to configure the [react native auth library](https://github.com/invertase/react-native-app-auth) to also return the PKCE code verifier along with the authorization code. This can be done by setting the `usePKCE` boolean to `true` and also by setting the `skipCodeExchange` to `true` when configuring the react native auth library. - -The minimum scope that is required by SuperTokens is one that gives you the user's email - in case of Google login, it is `"https://www.googleapis.com/auth/userinfo.email"`. +You can use the [react native auth library](https://github.com/FormidableLabs/react-native-app-auth) to also return the PKCE code verifier along with the authorization code. This can be done by setting the `usePKCE` boolean to `true` and also by setting the `skipCodeExchange` to `true` when configuring the react native auth library. @@ -875,7 +862,7 @@ The minimum scope that is required by SuperTokens is one that gives you the user

Step 1) Fetching the authorisation token on the frontend

-You can follow the [official guide](https://developers.google.com/identity/protocols/oauth2/native-app) on how to use the PKCE flow with google sign in on Android +You can use the [AppAuth-Android](https://github.com/openid/AppAuth-Android) library to use the PKCE flow by using the `setCodeVerifier` method when creating a `AuthorizationRequest`. @@ -883,7 +870,7 @@ You can follow the [official guide](https://developers.google.com/identity/proto

Step 1) Fetching the authorisation token on the frontend

-You can follow the [official guide](https://developers.google.com/identity/protocols/oauth2/native-app) on how to use the PKCE flow with google sign in on iOS +You can use the [AppAuth-iOS](https://github.com/openid/AppAuth-iOS) library to use the PKCE flow. @@ -891,7 +878,7 @@ You can follow the [official guide](https://developers.google.com/identity/proto

Step 1) Fetching the authorisation token on the frontend

-You can follow the guide for [flutter_appauth](https://pub.dev/packages/flutter_appauth) on how to use the PKCE flow with google sign in with Flutter +You can use [flutter_appauth](https://pub.dev/packages/flutter_appauth) to use the PKCE flow by providing a `codeVerifier` when you call the `appAuth.token` function. @@ -908,10 +895,10 @@ curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signinup' \ --header 'rid: ^{codeImportRecipeName}' \ --header 'Content-Type: application/json' \ --data-raw '{ - "thirdPartyId": "google", + "thirdPartyId": "THIRD_PARTY_ID", "clientType": "...", "redirectURIInfo": { - "redirectURIOnProviderDashboard": "^{form_apiDomain}^{form_apiBasePath}/callback/google", + "redirectURIOnProviderDashboard": "REDIRECT_URI", "redirectURIQueryParams": { "code": "...", }, @@ -921,9 +908,8 @@ curl --location --request POST '^{form_apiDomain}^{form_apiBasePath}/signinup' \ ``` :::important -- The `clientType` input is optional, and is required only if you have initialised more than one client in the provide on the backend (See the "Social / SSO login for both, web and mobile apps" section below). -- On iOS, `redirectURIOnProviderDashboard` doesn't matter and its value can be a universal link configured for your app. -- On Android, the `redirectURIOnProviderDashboard` should match the one configured on the Google cloud platform. +- Replace `THIRD_PARTY_ID` with the provider id. The provider id must match the one you configure in the backend when intialising SuperTokens. +- `REDIRECT_URI` must exactly match the value you configure on the providers dashboard. ::: The response body from the API call has a `status` property in it: @@ -945,11 +931,11 @@ On success, the backend will send back session tokens as part of the response he

Step 1) Fetching the OAuth / access tokens on the frontend

1. Sign in with the social provider. The minimum required scope is the one that provides access to the user's email. You can use any library to sign in with the social provider. -2. Get the access token on the frontend. +2. Get the access token on the frontend if it is available. 3. Get the id token from the sign in result if it is available. -:::info -If you are using a social provider that does not provide an access token on the frontend you can use "Flow 1a" in these docs instead. +:::important +You need to provide either the access token or the id token in step 2, depending on what is available. Only one of the tokens are required and not both. :::

Step 2) Calling the signinup API to use the OAuth tokens