@infinitylearn/one-auth-mobile

Content-only React Native authentication widget. The consuming app owns branding, durable session storage, analytics sinks, and post-login navigation.

For oneApp / learn, Android uses the same shared screens as web (@shared/AuthApp, hub → phone → OTP → signup) with @repo/ui native implementations—not a separate hand-built UI in the native package.

Install

npm install @infinitylearn/one-auth-mobile

Usage

import {
  AuthWidget,
  type AuthWidgetEvent,
} from '@infinitylearn/one-auth-mobile'

export function LoginScreen() {
  const onEvent = (event: AuthWidgetEvent) => {
    if (event.type === 'SESSION_READY') {
      // Persist accessToken, refreshToken, profilesData and accountsData.
    }
  }

  return (
    <AuthWidget
      env="STAGING"
      themeName="learn"
      verticalId={1}
      onEvent={onEvent}
      onError={console.error}
    />
  )
}

Host Metro setup (required)

From npm (>=2.0.5), shared/, vendor/ui, and vendor/tokens ship inside the package. Merge the helper in metro.config.js:

const { mergeConfig } = require('@react-native/metro-config');
const { getAuthWidgetMobileMetroConfig } = require('@infinitylearn/one-auth-mobile/metro');

module.exports = mergeConfig(defaultConfig, getAuthWidgetMobileMetroConfig(__dirname));

Add babel-plugin-module-resolver aliases (same as native-host/babel.config.js) pointing into node_modules/@infinitylearn/one-auth-mobile/shared and …/vendor/ui, …/vendor/tokens.

Monorepo dev: copy native-host/metro.config.js instead.

• react-native-svg + react-native-svg-transformer for icons
• Peers: zod@3, react-error-boundary, react-native-safe-area-context

Poppins fonts (match web)

The published package includes Poppins under node_modules/@infinitylearn/one-auth-mobile/vendor/fonts/poppins/. Link them once in the host app so @repo/tokens fontFamily: Poppins resolves:

// react-native.config.js (host app)
module.exports = {
  assets: [
    './node_modules/@infinitylearn/one-auth-mobile/vendor/fonts/poppins/',
  ],
};

npx react-native-asset
# Rebuild Android/iOS after linking (clean build if fonts do not apply).

Monorepo native-host still points at the repo copy (../vendor/fonts/poppins).

npm @infinitylearn/one-auth-mobile ≥2.0.5 bakes env maps at publish time into shared/constants/nativeEnvConfigData.native.js inside the package (gateways + Android OTP).

Monorepo dev only — rebake before Metro:

node native/scripts/writeNativeEnvModule.cjs

Style parity (OneApp mobile + web @375px)

Native learn UI targets oaStudentMobile content metrics (phone / OTP / signup) and the same mobile SCSS rules as Storybook at ≤768px (OTP ≤1024px). Numbers live in shared/platform/learnFlowLayout.js and typography presets in shared/platform/nativeTypography.js.

| Screen | OneApp mobile source | Widget styles | |--------|----------------------|---------------| | Phone | oaStudentMobile/.../PhoneLoginScreen/styles.ts | phoneLoginPage/styles.native.js + web SCSS | | OTP | OtpVerificationScreen (reuses Phone styles) | verifyOtpPage/styles.native.js + web SCSS | | Signup | SignupFlow/SignupScreen.styles.ts | SignUp/signupStyles.native.js + profile/review steps | | Multiple accounts | MultipleAccountsFlow/MultipleAccountStyles.ts | multipleAccountsStyles.native.js + accountCard.native.jsx | | Consent | LoginWithUsernameScreen/AuthConsent | AuthConsentCheckboxes.native.jsx |

Widget stays content-only (no purple shell / logo). Web SCSS under shared/source/pages/auth/** mirrors oaStudentWeb auth pages.

After linking Poppins, rebuild the native app (Metro reload alone is not enough).

Visual QA checklist

Side-by-side: native-host Android vs OneApp PhoneLoginScreen → OTP → multiple accounts → signup, and Storybook (oneApp, themeName: learn, ~375px) vs oaStudentWeb.

| Step | Check | |------|--------| | Phone | Title h2 + subtitle; field marginTop 12; consent paddingLeft 8; Get OTP 56×pill primary[30] / disabled neutral[90]; footer margin ~2xl; floating label on border (not inset) | | Phone consent | Terms + WhatsApp default unchecked; Get OTP disabled until terms | | OTP | Two subtitle lines; OTP cells size md / gap 24; error under boxes; resend helper + SMS/WA method pills (radii 2xl); Verify CTA footer margin ~3xl | | OTP resend | Timer running shows countdown; expired shows canResend + enabled method buttons | | Multiple accounts | Title + subtitle; horizontal account cards (avatar/initials, grade, selected primary[95]); add-profile card when <3 accounts; Continue disabled until selection | | Add profile modal | Info icon + warning box; Continue → signup; Go back closes | | Signup profile | Two-step like web: name fields, grade Select, learning goals modal + dismissible pills; Proceed disabled until valid | | Signup review | Name / grade / goals summary; Back → profile; Confirm registers + SESSION_READY | | Signup redirect | Registered + congratulations + redirect icon (post-confirm) | | Hub (loginEntry="hub" only) | Welcome + three method cards; username link on phone | | Vertical 6 | verticalId={6} sends school_code: ITHREEW_1 on register | | I3W missing profile | verticalId={6} + existing phone with only IL/SCA profiles → OTP/account Continue → signup; first/last name prefilled from profiles user_account_details; confirm → I3W profile + SESSION_READY |

OTP on native uses v3 generate-otp with Android headers (no reCAPTCHA UI).

Native OTP defaults come from shared/constants/publishedBundleOtp.native.js (extracted from published @infinitylearn/[email protected]). To refresh from npm:

NPM_TOKEN=… node native/scripts/syncOtpFromPublishedMobilePack.cjs
node native/scripts/writeNativeEnvModule.cjs

Override locally via .env.staging or .env.native-otp.local, then rebake and restart Metro.

Contract

| Prop | Required | Type | |------|----------|------| | env | yes | STAGING \| PREPROD \| PROD | | onEvent | yes | (event: AuthWidgetEvent) => void | | onError | yes | (error: AuthWidgetError) => void | | themeName | no | learn \| oneAppMeta \| sriChaitanya | | verticalId | no | 1 \| 6 (default 1) |

Build and publish

React Native hosts compile src/index.ts + embedded shared/ via Metro (see native-host/ for monorepo dev).

Publish (from repo root, with .env.staging / .env.preprod / .env.production filled and OTP via .env.native-otp.local or publishedBundleOtp.native.js):

cd native
npm install
npm run pack:check   # dry-run tarball; validates env + copies shared/vendor
npm publish --access public

Requires @infinitylearn npm publish access. Do not commit native/shared or native/vendor (removed automatically after pack via postpack).