Skip to content

Commit

Permalink
Refactor based on PR comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@nkshah2
nkshah2 committed Nov 21, 2023
1 parent 895b612 commit cb07f0b
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 96 deletions.
50 changes: 18 additions & 32 deletions v2/thirdparty/custom-ui/thirdparty-login.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ fileprivate class ViewController: UIViewController, ASAuthorizationControllerPre

<h4>Step 1) Fetching the authorisation token on the frontend</h4>

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';
Expand Down Expand Up @@ -675,7 +675,7 @@ export const performGoogleSignIn = async (): Promise<boolean> => {

<h4>Step 1) Fetching the authorisation token on the frontend</h4>

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
Expand Down Expand Up @@ -727,7 +727,7 @@ class LoginActivity : AppCompatActivity() {

<h4>Step 1) Fetching the authorisation token on the frontend</h4>

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
Expand Down Expand Up @@ -755,7 +755,7 @@ fileprivate class LoginScreenViewController: UIViewController {

<h4>Step 1) Fetching the authorisation token on the frontend</h4>

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';
Expand Down Expand Up @@ -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:
Expand All @@ -862,33 +851,31 @@ This is similar to flow 1a, except that you do **not** need to provide a client

<h3>Step 1) Fetching the authorisation token on the frontend</h3>

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.

</TabItem>

<TabItem value="android">

<h3>Step 1) Fetching the authorisation token on the frontend</h3>

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

</TabItem>

<TabItem value="ios">

<h3>Step 1) Fetching the authorisation token on the frontend</h3>

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.

</TabItem>

<TabItem value="flutter">

<h3>Step 1) Fetching the authorisation token on the frontend</h3>

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.

</TabItem>

Expand All @@ -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": "...",
},
Expand All @@ -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:
Expand All @@ -942,11 +928,11 @@ On success, the backend will send back session tokens as part of the response he
<h3>Step 1) Fetching the OAuth / access tokens on the frontend</h3>

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

<h3>Step 2) Calling the signinup API to use the OAuth tokens</h3>
Expand Down
Loading

0 comments on commit cb07f0b

Please sign in to comment.