Skip to content

Fix padding in the social login tutorial #988

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 22, 2025
Merged

Fix padding in the social login tutorial #988

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions ...entication/social/_blocks/frontend-custom-ui-mobile-authorization-code-flow.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { Question, Answer } from "/src/components/Question";

<MobileFrameworksCard.Content value="reactnative">

<MobileFrameworksCard.Section>

#### 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.
Expand All @@ -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).

</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

<MobileFrameworksCard.Content value="android">


<MobileFrameworksCard.Section>

#### Fetching the authorisation token on the frontend

:::info
At the moment this flow is not supported on Android.
:::

</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

<MobileFrameworksCard.Content value="ios">

<MobileFrameworksCard.Section>

#### 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).
Expand Down Expand Up @@ -74,10 +85,14 @@ fileprivate class ViewController: UIViewController, ASAuthorizationControllerPre
}
```

</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

<MobileFrameworksCard.Content value="flutter">

<MobileFrameworksCard.Section>

#### 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).
Expand Down Expand Up @@ -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.

</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

</MobileFrameworksCard>
Expand Down Expand Up @@ -341,6 +358,8 @@ On success, the backend sends back session tokens as part of the response header

<MobileFrameworksCard.Content value="reactnative">

<MobileFrameworksCard.Section>

#### 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.
Expand Down Expand Up @@ -371,10 +390,15 @@ export const performGoogleSignIn = async (): Promise<boolean> => {
};
```


</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

<MobileFrameworksCard.Content value="android">

<MobileFrameworksCard.Section>

#### 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).
Expand Down Expand Up @@ -423,10 +447,14 @@ class LoginActivity : AppCompatActivity() {
}
```

</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

<MobileFrameworksCard.Content value="ios">

<MobileFrameworksCard.Section>

#### 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).
Expand All @@ -451,10 +479,14 @@ fileprivate class LoginScreenViewController: UIViewController {
}
```

</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

<MobileFrameworksCard.Content value="flutter">

<MobileFrameworksCard.Section>

#### 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).
Expand Down Expand Up @@ -501,6 +533,8 @@ Future<void> loginWithGoogle() async {
}
```

</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

</MobileFrameworksCard>
Expand Down Expand Up @@ -551,34 +585,52 @@ This flow only works for providers which support the [`PKCE` flow](https://oauth

<MobileFrameworksCard.Content value="reactnative">

<MobileFrameworksCard.Section>

#### 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.


</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

<MobileFrameworksCard.Content value="android">

<MobileFrameworksCard.Section>

#### 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`.

</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

<MobileFrameworksCard.Content value="ios">

<MobileFrameworksCard.Section>

#### 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.


</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

<MobileFrameworksCard.Content value="flutter">

<MobileFrameworksCard.Section>

#### 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.

</MobileFrameworksCard.Section>

</MobileFrameworksCard.Content>

</MobileFrameworksCard>
Expand Down