Merge pull request #746 from supertokens/mobile-social-login

Update explanation for Android google login

v2/emailpassword/nextjs/app-directory/protecting-route.mdx

@@ -97,18 +97,26 @@ Let's say we want to protect the home page of your website (`/` route). First we
 ```tsx title="app/components/sessionAuthForNextJS.tsx"
 "use client";
 
+import React, { useState, useEffect } from "react";
 import { SessionAuth } from "supertokens-auth-react/recipe/session";
 
 type Props = Parameters<typeof SessionAuth>[0] & {
     children?: React.ReactNode | undefined;
 };
 
 export const SessionAuthForNextJS = (props: Props) => {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        setLoaded(true)
+    }, [])
+    if (!loaded) {
+        return props.children;
+    }
     return <SessionAuth {...props}>{props.children}</SessionAuth>;
 };
 ```
 
-This is a client component that renders just its children on the server side and renders the children wrapped with `SessionAuth` on the client side.
+This is a client component that renders just its children on the server side and renders the children wrapped with `SessionAuth` on the client side. This way, the server side returns the page content, and on the client, the same page content is wrapper with `SessionAuth` which will handle session related events on the frontend - for example, if the user's session expires whilst they are on this page, then `SessionAuth` will auto redirect them to the login page.
 
 #### Creating the `TryRefreshComponent`
 

v2/passwordless/nextjs/app-directory/protecting-route.mdx

@@ -97,18 +97,26 @@ Let's say we want to protect the home page of your website (`/` route). First we
 ```tsx title="app/components/sessionAuthForNextJS.tsx"
 "use client";
 
+import React, { useState, useEffect } from "react";
 import { SessionAuth } from "supertokens-auth-react/recipe/session";
 
 type Props = Parameters<typeof SessionAuth>[0] & {
     children?: React.ReactNode | undefined;
 };
 
 export const SessionAuthForNextJS = (props: Props) => {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        setLoaded(true)
+    }, [])
+    if (!loaded) {
+        return props.children;
+    }
     return <SessionAuth {...props}>{props.children}</SessionAuth>;
 };
 ```
 
-This is a client component that renders just its children on the server side and renders the children wrapped with `SessionAuth` on the client side.
+This is a client component that renders just its children on the server side and renders the children wrapped with `SessionAuth` on the client side. This way, the server side returns the page content, and on the client, the same page content is wrapper with `SessionAuth` which will handle session related events on the frontend - for example, if the user's session expires whilst they are on this page, then `SessionAuth` will auto redirect them to the login page.
 
 #### Creating the `TryRefreshComponent`
 

v2/thirdparty/custom-ui/thirdparty-login.mdx

@@ -768,12 +768,14 @@ On success, the backend will send back session tokens as part of the response he
 
 <TabItem value="android">
 
-For Android, Google recommends you to use their [official Andoird library](https://developers.google.com/identity/sign-in/android/start-integrating), which follows "Flow 1a" in these docs.
+For Android, Google recommends you to use their [official Android library](https://developers.google.com/identity/sign-in/android/start-integrating), which follows "Flow 1a" in these docs.
 
 Essentially, the library will give you back a one time use auth code from Google which you can send to the `/signinup` API (as shown in Flow 1a -> Step 2) to exchange it with an access token and the user's information.
 
 :::important
-On Google's dashboard, you should create a Web client to use for your Android app, otherwise Google won't return an access token to you.
+On Google's dashboard, you need to create both a Web client and an Android for your app. The Android client will be used to interact with the native Google login APIs, the Web client will be used to request the authorization code when triggering the login flow with Google.
+
+You also need to provide the Android client with the SHA-1 fingerprint of your keystore to prevent errors when logging in.
 :::
 
 </TabItem>

v2/thirdparty/nextjs/app-directory/protecting-route.mdx

@@ -97,18 +97,26 @@ Let's say we want to protect the home page of your website (`/` route). First we
 ```tsx title="app/components/sessionAuthForNextJS.tsx"
 "use client";
 
+import React, { useState, useEffect } from "react";
 import { SessionAuth } from "supertokens-auth-react/recipe/session";
 
 type Props = Parameters<typeof SessionAuth>[0] & {
     children?: React.ReactNode | undefined;
 };
 
 export const SessionAuthForNextJS = (props: Props) => {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        setLoaded(true)
+    }, [])
+    if (!loaded) {
+        return props.children;
+    }
     return <SessionAuth {...props}>{props.children}</SessionAuth>;
 };
 ```
 
-This is a client component that renders just its children on the server side and renders the children wrapped with `SessionAuth` on the client side.
+This is a client component that renders just its children on the server side and renders the children wrapped with `SessionAuth` on the client side. This way, the server side returns the page content, and on the client, the same page content is wrapper with `SessionAuth` which will handle session related events on the frontend - for example, if the user's session expires whilst they are on this page, then `SessionAuth` will auto redirect them to the login page.
 
 #### Creating the `TryRefreshComponent`
 

v2/thirdpartyemailpassword/custom-ui/thirdparty-login.mdx

@@ -771,12 +771,14 @@ On success, the backend will send back session tokens as part of the response he
 
 <TabItem value="android">
 
-For Android, Google recommends you to use their [official Andoird library](https://developers.google.com/identity/sign-in/android/start-integrating), which follows "Flow 1a" in these docs.
+For Android, Google recommends you to use their [official Android library](https://developers.google.com/identity/sign-in/android/start-integrating), which follows "Flow 1a" in these docs.
 
 Essentially, the library will give you back a one time use auth code from Google which you can send to the `/signinup` API (as shown in Flow 1a -> Step 2) to exchange it with an access token and the user's information.
 
 :::important
-On Google's dashboard, you should create a Web client to use for your Android app, otherwise Google won't return an access token to you.
+On Google's dashboard, you need to create both a Web client and an Android for your app. The Android client will be used to interact with the native Google login APIs, the Web client will be used to request the authorization code when triggering the login flow with Google.
+
+You also need to provide the Android client with the SHA-1 fingerprint of your keystore to prevent errors when logging in.
 :::
 
 </TabItem>

v2/thirdpartypasswordless/custom-ui/thirdparty-login.mdx

@@ -771,12 +771,14 @@ On success, the backend will send back session tokens as part of the response he
 
 <TabItem value="android">
 
-For Android, Google recommends you to use their [official Andoird library](https://developers.google.com/identity/sign-in/android/start-integrating), which follows "Flow 1a" in these docs.
+For Android, Google recommends you to use their [official Android library](https://developers.google.com/identity/sign-in/android/start-integrating), which follows "Flow 1a" in these docs.
 
 Essentially, the library will give you back a one time use auth code from Google which you can send to the `/signinup` API (as shown in Flow 1a -> Step 2) to exchange it with an access token and the user's information.
 
 :::important
-On Google's dashboard, you should create a Web client to use for your Android app, otherwise Google won't return an access token to you.
+On Google's dashboard, you need to create both a Web client and an Android for your app. The Android client will be used to interact with the native Google login APIs, the Web client will be used to request the authorization code when triggering the login flow with Google.
+
+You also need to provide the Android client with the SHA-1 fingerprint of your keystore to prevent errors when logging in.
 :::
 
 </TabItem>

v2/thirdpartypasswordless/nextjs/app-directory/protecting-route.mdx

@@ -97,18 +97,26 @@ Let's say we want to protect the home page of your website (`/` route). First we
 ```tsx title="app/components/sessionAuthForNextJS.tsx"
 "use client";
 
+import React, { useState, useEffect } from "react";
 import { SessionAuth } from "supertokens-auth-react/recipe/session";
 
 type Props = Parameters<typeof SessionAuth>[0] & {
     children?: React.ReactNode | undefined;
 };
 
 export const SessionAuthForNextJS = (props: Props) => {
+    const [loaded, setLoaded] = useState(false);
+    useEffect(() => {
+        setLoaded(true)
+    }, [])
+    if (!loaded) {
+        return props.children;
+    }
     return <SessionAuth {...props}>{props.children}</SessionAuth>;
 };
 ```
 
-This is a client component that renders just its children on the server side and renders the children wrapped with `SessionAuth` on the client side.
+This is a client component that renders just its children on the server side and renders the children wrapped with `SessionAuth` on the client side. This way, the server side returns the page content, and on the client, the same page content is wrapper with `SessionAuth` which will handle session related events on the frontend - for example, if the user's session expires whilst they are on this page, then `SessionAuth` will auto redirect them to the login page.
 
 #### Creating the `TryRefreshComponent`