Auth: Default to phone number auth on mobiles

src/api/gramjs/methods/client.ts

@@ -44,7 +44,7 @@ export async function init(_onUpdate: OnApiUpdate, initialArgs: ApiInitialArgs)
 
   onUpdate = _onUpdate;
 
-  const { sessionData, userAgent } = initialArgs;
+  const { userAgent, platform, sessionData } = initialArgs;
   const session = new sessions.CallbackSession(sessionData, onSessionUpdate);
 
   client = new TelegramClient(
@@ -76,7 +76,7 @@ export async function init(_onUpdate: OnApiUpdate, initialArgs: ApiInitialArgs)
         firstAndLastNames: onRequestRegistration,
         qrCode: onRequestQrCode,
         onError: onAuthError,
-        initialMethod: 'qrCode',
+        initialMethod: platform === 'iOS' || platform === 'Android' ? 'phoneNumber' : 'qrCode',
       });
     } catch (err) {
       onUpdate({

src/api/types/misc.ts

@@ -2,6 +2,7 @@ import { ApiDocument } from './messages';
 
 export interface ApiInitialArgs {
   userAgent: string;
+  platform?: string;
   sessionData?: ApiSessionData;
 }
 

src/components/auth/Auth.tsx

@@ -14,6 +14,7 @@ import AuthRegister from './AuthRegister.async';
 import AuthQrCode from './AuthQrCode';
 
 import './Auth.scss';
+import { PLATFORM_ENV } from '../../util/environment';
 
 type StateProps = Pick<GlobalState, 'authState'>;
 type DispatchProps = Pick<GlobalActions, 'reset' | 'initApi'>;
@@ -35,7 +36,9 @@ const Auth: FC<StateProps & DispatchProps> = ({ authState, reset, initApi }) =>
       return <UiLoader page="authPhoneNumber" key="authPhoneNumber"><AuthPhoneNumber /></UiLoader>;
     case 'authorizationStateWaitQrCode':
     default:
-      return <UiLoader page="authQrCode" key="authQrCode"><AuthQrCode /></UiLoader>;
+      return PLATFORM_ENV === 'iOS' || PLATFORM_ENV === 'Android'
+        ? <UiLoader page="authPhoneNumber" key="authPhoneNumber"><AuthPhoneNumber /></UiLoader>
+        : <UiLoader page="authQrCode" key="authQrCode"><AuthQrCode /></UiLoader>;
   }
 };
 

src/components/auth/AuthQrCode.tsx

@@ -11,13 +11,13 @@ import Loading from '../ui/Loading';
 import Button from '../ui/Button';
 import useHistoryBack from '../../hooks/useHistoryBack';
 
-type StateProps = Pick<GlobalState, 'connectionState' | 'authQrCode'>;
+type StateProps = Pick<GlobalState, 'connectionState' | 'authState' | 'authQrCode'>;
 type DispatchProps = Pick<GlobalActions, 'returnToAuthPhoneNumber'>;
 
 const DATA_PREFIX = 'tg://login?token=';
 
 const AuthCode: FC<StateProps & DispatchProps> = ({
-  connectionState, authQrCode, returnToAuthPhoneNumber,
+  connectionState, authState, authQrCode, returnToAuthPhoneNumber,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const qrCodeRef = useRef<HTMLDivElement>(null);
@@ -43,6 +43,8 @@ const AuthCode: FC<StateProps & DispatchProps> = ({
 
   useHistoryBack(returnToAuthPhoneNumber);
 
+  const isAuthReady = authState === 'authorizationStateWaitQrCode';
+
   return (
     <div id="auth-qr-form" className="custom-scroll">
       <div className="auth-form qr">
@@ -57,13 +59,15 @@ const AuthCode: FC<StateProps & DispatchProps> = ({
           <li><span>Go to&nbsp;<b>Settings</b>&nbsp;&gt;&nbsp;<b>Devices</b>&nbsp;&gt;&nbsp;<b>Scan QR</b></span></li>
           <li><span>Point your phone at this screen to confirm login</span></li>
         </ol>
-        <Button isText onClick={returnToAuthPhoneNumber}>Log in by phone number</Button>
+        {isAuthReady && (
+          <Button isText onClick={returnToAuthPhoneNumber}>Log in by phone number</Button>
+        )}
       </div>
     </div>
   );
 };
 
 export default memo(withGlobal(
-  (global): StateProps => pick(global, ['connectionState', 'authQrCode']),
+  (global): StateProps => pick(global, ['connectionState', 'authState', 'authQrCode']),
   (setGlobal, actions): DispatchProps => pick(actions, ['returnToAuthPhoneNumber']),
 )(AuthCode));

src/modules/actions/api/initial.ts

@@ -12,6 +12,7 @@ import {
   MEDIA_PROGRESSIVE_CACHE_NAME,
   IS_TEST,
 } from '../../../config';
+import { PLATFORM_ENV } from '../../../util/environment';
 import { initApi, callApi } from '../../../api/gramjs';
 import { unsubscribe } from '../../../util/notifications';
 import * as cacheApi from '../../../util/cacheApi';
@@ -33,6 +34,7 @@ addReducer('initApi', (global: GlobalState, actions) => {
 
     void initApi(actions.apiUpdate, {
       userAgent: navigator.userAgent,
+      platform: PLATFORM_ENV,
       sessionData: loadStoredSession(),
     });
   })();

src/util/environment.ts

@@ -15,10 +15,10 @@ export function getPlatform() {
   const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'];
   const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
   const iosPlatforms = ['iPhone', 'iPad', 'iPod'];
-  let os: 'Mac OS' | 'iOS' | 'Windows' | 'Android' | 'Linux' | undefined;
+  let os: 'macOS' | 'iOS' | 'Windows' | 'Android' | 'Linux' | undefined;
 
   if (macosPlatforms.indexOf(platform) !== -1) {
-    os = 'Mac OS';
+    os = 'macOS';
   } else if (iosPlatforms.indexOf(platform) !== -1) {
     os = 'iOS';
   } else if (windowsPlatforms.indexOf(platform) !== -1) {
@@ -33,7 +33,7 @@ export function getPlatform() {
 }
 
 export const PLATFORM_ENV = getPlatform();
-export const IS_MAC_OS = PLATFORM_ENV === 'Mac OS';
+export const IS_MAC_OS = PLATFORM_ENV === 'macOS';
 export const IS_IOS = PLATFORM_ENV === 'iOS';
 export const IS_ANDROID = PLATFORM_ENV === 'Android';
 export const IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);