From 33fc8bec31445ddd08afaf6f36dbb689d2ba9a7a Mon Sep 17 00:00:00 2001 From: Bogdan Carpusor Date: Tue, 22 Apr 2025 16:30:44 +0100 Subject: [PATCH] Fix padding in the social login tutorial --- ...stom-ui-mobile-authorization-code-flow.mdx | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/docs/authentication/social/_blocks/frontend-custom-ui-mobile-authorization-code-flow.mdx b/docs/authentication/social/_blocks/frontend-custom-ui-mobile-authorization-code-flow.mdx index 531e6df2e..fa31b10fa 100644 --- a/docs/authentication/social/_blocks/frontend-custom-ui-mobile-authorization-code-flow.mdx +++ b/docs/authentication/social/_blocks/frontend-custom-ui-mobile-authorization-code-flow.mdx @@ -12,6 +12,8 @@ import { Question, Answer } from "/src/components/Question"; + + #### Fetching the authorisation token on the frontend For react native apps, this involves setting up the [react-native-apple-authentication library](https://github.com/invertase/react-native-apple-authentication) in your app. Check out their `README` for steps on how to integrate their `SDK` into your application. The minimum scope required by SuperTokens is the one that gives the user's email. In the case of Apple, that could be the user's actual email or the proxy email provided by Apple - it doesn't matter. @@ -22,20 +24,29 @@ A full example of this is available in [the example app](https://github.com/supe In case you are using Expo, you can use the [expo-apple-authentication](https://docs.expo.dev/versions/latest/sdk/apple-authentication/) library instead (not that this library only works on iOS). + + + + + #### Fetching the authorisation token on the frontend :::info At the moment this flow is not supported on Android. ::: + + + + #### Fetching the authorisation token on the frontend For iOS you use the normal sign in with apple flow and then use the authorization code to login with SuperTokens. You can see a full example of this in the `onAppleClicked` function in [the example app](https://github.com/supertokens/supertokens-ios/blob/master/examples/with-thirdparty/with-thirdparty/LoginScreen/LoginScreenViewController.swift). @@ -74,10 +85,14 @@ fileprivate class ViewController: UIViewController, ASAuthorizationControllerPre } ``` + + + + #### Fetching the authorisation token on the frontend For flutter, use the [`sign_in_with_apple`](https://pub.dev/packages/sign_in_with_apple) package. Make sure to follow the prerequisite 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 [the example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). @@ -284,6 +299,8 @@ thirdparty.init( In the code above, the `appleRedirectHandlerPOST` API is overridden to check if the request came from the Android app. You can skip checking the state if you only have a mobile app and no website. `sign_in_with_apple` requires parsing the query params sent by Apple and including them in the redirect URL in a specific way. Then, redirect to the deep link URL. Refer to the README for `sign_in_with_apple` to read about the deep link setup required in Android. + + @@ -341,6 +358,8 @@ On success, the backend sends back session tokens as part of the response header + + #### Fetching the authorisation token on the frontend This involves setting up the [@react-native-google-signin/google-signin](https://github.com/react-native-google-signin/google-signin) in your app. Checkout their `README` for steps on how to integrate their `SDK` into your application. The minimum scope required by SuperTokens is the one that gives the user's email. @@ -371,10 +390,15 @@ export const performGoogleSignIn = async (): Promise => { }; ``` + + + + + #### Fetching the authorisation token on the frontend 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 [the example app](https://github.com/supertokens/supertokens-android/blob/master/examples/with-thirdparty/app/src/main/java/com/supertokens/supertokensexample/LoginActivity.kt). @@ -423,10 +447,14 @@ class LoginActivity : AppCompatActivity() { } ``` + + + + #### Fetching the authorisation token on the frontend For iOS, 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 [the example app](https://github.com/supertokens/supertokens-ios/blob/master/examples/with-thirdparty/with-thirdparty/LoginScreen/LoginScreenViewController.swift). @@ -451,10 +479,14 @@ fileprivate class LoginScreenViewController: UIViewController { } ``` + + + + #### Fetching the authorisation token on the frontend For flutter, use the [`google_sign_in`](https://pub.dev/packages/google_sign_in) package. Make sure to follow the prerequisite 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 [the example app](https://github.com/supertokens/supertokens-flutter/blob/master/examples/with-thirdparty/lib/screens/login.dart). @@ -501,6 +533,8 @@ Future loginWithGoogle() async { } ``` + + @@ -551,34 +585,52 @@ This flow only works for providers which support the [`PKCE` flow](https://oauth + + #### Fetching the authorisation token on the frontend 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. Achieve this by setting the `usePKCE` boolean to `true` and also by setting the `skipCodeExchange` to `true` when configuring the react native auth library. + + + + + #### Fetching the authorisation token on the frontend 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`. + + + + #### Fetching the authorisation token on the frontend You can use the [AppAuth-iOS](https://github.com/openid/AppAuth-iOS) library to use the `PKCE` flow. + + + + + #### Fetching the authorisation token on the frontend 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. + +