@thanhphi/create-360-miniapp 0.0.0-stage → 0.2.0

package/template/__tests__/auth.test.ts

@@ -0,0 +1,287 @@
+import {
+  AuthError,
+  HttpError,
+  type HostCapabilities,
+  type SessionSnapshot,
+} from '@thanhphi/miniapp-sdk';
+import {
+  createStandaloneSession,
+  type OidcTokens,
+} from '../src/modules/auth/services/standalone-session';
+import { createApplicationServices } from '../src/services/application';
+import { profileRequested } from '../src/modules/__MODULE__/redux/home-slice';
+import { refresh as nativeRefresh } from 'react-native-app-auth';
+import {
+  isOidcConfigured,
+  oidcOperations,
+} from '../src/modules/auth/services/oidc';
+
+jest.mock('react-native-app-auth', () => ({
+  authorize: jest.fn(),
+  refresh: jest.fn(),
+}));
+jest.mock('@env-config', () => ({
+  __esModule: true,
+  default: {
+    ENV: 'staging',
+    BASE_URL: 'https://api.example.test',
+    API_TIMEOUT_MS: 1000,
+    AUTH: { issuer: '', clientId: '', redirectUrl: '', scopes: ['openid'] },
+  },
+}));
+
+function deferred<T>() {
+  let resolve!: (value: T) => void;
+  let reject!: (error: unknown) => void;
+  const promise = new Promise<T>((yes, no) => {
+    resolve = yes;
+    reject = no;
+  });
+  return { promise, resolve, reject };
+}
+
+function testHost(initial: SessionSnapshot) {
+  let value = initial;
+  const listeners = new Set<(snapshot: SessionSnapshot) => void>();
+  const capabilities: HostCapabilities = {
+    auth: {
+      getSnapshot: () => ({ ...value }),
+      refreshIfNeeded: jest.fn(async () => value.accessToken),
+      subscribe(listener) {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      },
+    },
+    closeMiniApp: jest.fn(),
+  };
+  return {
+    capabilities,
+    listeners,
+    emit(next: SessionSnapshot) {
+      value = next;
+      for (const listener of listeners) listener({ ...next });
+    },
+  };
+}
+
+describe('standalone session', () => {
+  test('rejects example OIDC values and maps revoked grants distinctly from network failures', async () => {
+    expect(
+      isOidcConfigured({
+        issuer: 'https://YOUR_OIDC_ISSUER',
+        clientId: 'YOUR_CLIENT_ID',
+        redirectUrl: 'sample://oauth',
+        scopes: ['openid'],
+      }),
+    ).toBe(false);
+    expect(
+      isOidcConfigured({
+        issuer: 'https://identity.example.test',
+        clientId: 'mobile',
+        redirectUrl: 'sample://oauth',
+        scopes: ['openid'],
+      }),
+    ).toBe(true);
+    const native = jest.mocked(nativeRefresh);
+    native.mockRejectedValueOnce({ code: 'invalid_grant' });
+    await expect(oidcOperations.refresh('revoked')).rejects.toMatchObject({
+      kind: 'expired',
+    });
+    native.mockRejectedValueOnce({ code: 'token_refresh_failed' });
+    await expect(oidcOperations.refresh('offline')).rejects.toMatchObject({
+      kind: 'unavailable',
+    });
+  });
+  test('coalesces a refresh and blocks its token write after local logout', async () => {
+    const response = deferred<OidcTokens>();
+    const refresh = jest.fn(() => response.promise);
+    const session = createStandaloneSession({
+      isConfigured: true,
+      authorize: async () => ({
+        accessToken: 'first-token',
+        refreshToken: 'private-refresh',
+      }),
+      refresh,
+    });
+    await session.actions.signIn();
+    const before = session.capabilities.auth.getSnapshot();
+    const first = session.capabilities.auth.refreshIfNeeded({
+      sessionId: before.sessionId,
+      failedAccessToken: before.accessToken,
+    });
+    const second = session.capabilities.auth.refreshIfNeeded({
+      sessionId: before.sessionId,
+      failedAccessToken: before.accessToken,
+    });
+    expect(first).toBe(second);
+    await Promise.resolve();
+    expect(refresh).toHaveBeenCalledTimes(1);
+    const checked = expect(first).rejects.toMatchObject({
+      kind: 'session-changed',
+    });
+    session.actions.signOut();
+    response.resolve({
+      accessToken: 'old-account-token',
+      refreshToken: 'old-refresh',
+    });
+    await checked;
+    expect(session.capabilities.auth.getSnapshot()).toEqual({
+      sessionId: null,
+      accessToken: null,
+    });
+    session.dispose();
+  });
+
+  test('blocks a late login result after logout', async () => {
+    const response = deferred<OidcTokens>();
+    const session = createStandaloneSession({
+      isConfigured: true,
+      authorize: () => response.promise,
+      refresh: jest.fn(),
+    });
+    const login = session.actions.signIn();
+    await Promise.resolve();
+    const checked = expect(login).rejects.toMatchObject({
+      kind: 'session-changed',
+    });
+    session.actions.signOut();
+    response.resolve({ accessToken: 'late-token' });
+    await checked;
+    expect(session.capabilities.auth.getSnapshot().accessToken).toBeNull();
+    session.dispose();
+  });
+
+  test('requires configured OIDC and never synthesizes credentials', async () => {
+    const authorize = jest.fn();
+    const session = createStandaloneSession({
+      isConfigured: false,
+      authorize,
+      refresh: jest.fn(),
+    });
+    await expect(session.actions.signIn()).rejects.toBeInstanceOf(AuthError);
+    expect(authorize).not.toHaveBeenCalled();
+    expect(session.capabilities.auth.getSnapshot()).toEqual({
+      sessionId: null,
+      accessToken: null,
+    });
+    session.dispose();
+  });
+});
+
+describe('application resources', () => {
+  const clients: ReturnType<typeof createApplicationServices>[] = [];
+  const originalFetch = globalThis.fetch;
+  beforeEach(() => {
+    globalThis.fetch = jest.fn();
+  });
+  afterEach(() => {
+    clients.splice(0).forEach(client => client.dispose());
+    globalThis.fetch = originalFetch;
+  });
+  const create = (host: HostCapabilities) => {
+    const client = createApplicationServices(host);
+    clients.push(client);
+    return client;
+  };
+
+  test('isolates instances; rotation retains caches; account change resets Redux and queries', () => {
+    const host = testHost({ sessionId: 'alice', accessToken: 'first-token' });
+    const first = create(host.capabilities);
+    const second = create(host.capabilities);
+    first.store.dispatch(profileRequested());
+    first.queryClient.setQueryData(['profile', 'alice'], { name: 'Alice' });
+    expect(second.store.getState().home.profileRequested).toBe(false);
+    expect(
+      second.queryClient.getQueryData(['profile', 'alice']),
+    ).toBeUndefined();
+    expect(first.store.getState().auth).not.toHaveProperty('accessToken');
+    expect(JSON.stringify(first.store.getState())).not.toContain('first-token');
+    const dispatched = jest.spyOn(first.store, 'dispatch');
+    host.emit({ sessionId: 'alice', accessToken: 'rotated-token' });
+    expect(JSON.stringify(dispatched.mock.calls)).not.toContain(
+      'rotated-token',
+    );
+    expect(JSON.stringify(first.store.getState())).not.toContain('rotated-token');
+    expect(first.queryClient.getQueryData(['profile', 'alice'])).toEqual({
+      name: 'Alice',
+    });
+    expect(first.store.getState().home.profileRequested).toBe(true);
+    host.emit({ sessionId: 'bob', accessToken: 'bob-token' });
+    expect(
+      first.queryClient.getQueryData(['profile', 'alice']),
+    ).toBeUndefined();
+    expect(first.store.getState().home.profileRequested).toBe(false);
+    expect(first.store.getState().auth.sessionId).toBe('bob');
+    expect(JSON.stringify(first.store.getState())).not.toContain('bob-token');
+  });
+
+  test('dispose cancels a pending HTTP request, removes subscriptions and permits a fresh mount', async () => {
+    globalThis.fetch = jest.fn(() => new Promise<Response>(() => {}));
+    const host = testHost({ sessionId: 'alice', accessToken: 'alice-token' });
+    const first = create(host.capabilities);
+    const request = first.api.get('/me');
+    const checked = expect(request).rejects.toMatchObject({
+      kind: 'disposed',
+    } satisfies Partial<HttpError>);
+    await Promise.resolve();
+    first.dispose();
+    await checked;
+    expect(host.listeners.size).toBe(0);
+    expect(first.store.getState().auth.authenticated).toBe(false);
+    const next = create(host.capabilities);
+    expect(next.store.getState().auth.authenticated).toBe(true);
+    expect(next.store).not.toBe(first.store);
+    expect(host.listeners.size).toBe(1);
+  });
+
+  test('HTTP 401 retries once then clears user state when refresh still expires', async () => {
+    const unauthorized = {
+      status: 401,
+      ok: false,
+      headers: new Headers(),
+      url: '',
+      text: async () => '{}',
+    } as Response;
+    globalThis.fetch = jest.fn(async () => unauthorized);
+    const host = testHost({ sessionId: 'alice', accessToken: 'alice-token' });
+    const client = create(host.capabilities);
+    client.store.dispatch(profileRequested());
+    client.queryClient.setQueryData(['profile', 'alice'], { name: 'Alice' });
+    await expect(client.api.get('/me')).rejects.toMatchObject({
+      kind: 'expired',
+    });
+    expect(globalThis.fetch).toHaveBeenCalledTimes(2);
+    expect(client.store.getState().home.profileRequested).toBe(false);
+    expect(
+      client.queryClient.getQueryData(['profile', 'alice']),
+    ).toBeUndefined();
+    expect(client.store.getState().auth.authenticated).toBe(false);
+    expect(client.store.getState().auth.message).toContain('hết hạn');
+  });
+
+  test('all HTTP verbs inject the current host token and return parsed data', async () => {
+    const response = {
+      status: 200,
+      ok: true,
+      headers: new Headers(),
+      url: '',
+      text: async () => '{"ok":true}',
+    } as Response;
+    const fetch = jest.fn(async () => response);
+    globalThis.fetch = fetch;
+    const host = testHost({ sessionId: 'alice', accessToken: 'alice-token' });
+    const client = create(host.capabilities);
+    for (const method of ['get', 'post', 'put', 'patch', 'delete'] as const) {
+      await expect(client.api[method]('/me')).resolves.toEqual({ ok: true });
+      const [, init] = fetch.mock.calls[
+        fetch.mock.calls.length - 1
+      ] as unknown as [string, RequestInit];
+      expect(init.method).toBe(method.toUpperCase());
+      expect(new Headers(init.headers).get('Authorization')).toBe(
+        'Bearer alice-token',
+      );
+    }
+  });
+});

package/template/aliases.cjs

@@ -0,0 +1,16 @@
+module.exports = {
+  "@": "./src",
+  "@auth": "./src/modules/auth",
+  "@feature": "./src/modules/__MODULE__",
+  "@assets": "./src/assets",
+  "@common": "./src/common",
+  "@components": "./src/library/components",
+  "@env-config": "./env/env-config",
+  "@modules": "./src/modules",
+  "@navigation": "./src/navigation",
+  "@networking": "./src/library/networking",
+  "@redux": "./src/redux",
+  "@storage": "./src/library/utils/storage",
+  "@theme": "./src/themes",
+  "@utils": "./src/library/utils"
+};

package/template/app.config.js

@@ -0,0 +1,23 @@
+const fs = require('node:fs');
+const path = require('node:path');
+module.exports = ({ config }) => {
+  const selected = path.join(__dirname, 'env/selected.json');
+  const flavor =
+    process.env.APP_ENV ||
+    (fs.existsSync(selected)
+      ? JSON.parse(fs.readFileSync(selected, 'utf8')).flavor
+      : 'staging');
+  if (!['staging', 'beta', 'prod'].includes(flavor))
+    throw new Error('APP_ENV must be staging, beta or prod');
+  const input = JSON.parse(
+    fs.readFileSync(path.join(__dirname, 'env', `${flavor}.json`), 'utf8'),
+  );
+  const env = input.public || input;
+  return {
+    ...config,
+    plugins: [
+      ...(config.plugins || []),
+      ['react-native-app-auth', { redirectUrls: [env.AUTH.redirectUrl] }],
+    ],
+  };
+};

package/template/app.json

@@ -0,0 +1,17 @@
+{
+  "expo": {
+    "name": "__DISPLAY_NAME__",
+    "slug": "__PACKAGE_NAME__",
+    "version": "0.0.1",
+    "scheme": "__BUNDLE_ID__",
+    "ios": {
+      "bundleIdentifier": "__BUNDLE_ID__"
+    },
+    "android": {
+      "package": "__BUNDLE_ID__"
+    },
+    "plugins": [
+      "expo-dev-client"
+    ]
+  }
+}

package/template/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: ['babel-preset-expo'],
+  plugins: [['module-resolver', {
+    extensions: ['.ios.ts', '.android.ts', '.ts', '.ios.tsx', '.android.tsx', '.tsx', '.ios.js', '.android.js', '.js', '.json'],
+    alias: require('./aliases.cjs'),
+  }], ['react-native-unistyles/plugin', { root: 'src' }], 'react-native-worklets/plugin'],
+};

package/template/declare/assets.d.ts

@@ -0,0 +1,11 @@
+declare module '*.svg' {
+  import type { FunctionComponent } from 'react';
+  import type { SvgProps } from 'react-native-svg';
+  const Component: FunctionComponent<SvgProps>;
+  export default Component;
+}
+declare module '*.png' {
+  import type { ImageSourcePropType } from 'react-native';
+  const source: ImageSourcePropType;
+  export default source;
+}

package/template/env/beta.json

@@ -0,0 +1,16 @@
+{
+  "ENV": "beta",
+  "BASE_URL": "https://api.beta.example.com",
+  "API_TIMEOUT_MS": 15000,
+  "AUTH": {
+    "issuer": "https://login.microsoftonline.com/YOUR_TENANT_ID/v2.0",
+    "clientId": "YOUR_CLIENT_ID",
+    "redirectUrl": "__BUNDLE_ID__.auth://oauth/redirect",
+    "scopes": [
+      "openid",
+      "profile",
+      "offline_access",
+      "api://YOUR_API_CLIENT_ID/access_as_user"
+    ]
+  }
+}

package/template/env/prod.json

@@ -0,0 +1,16 @@
+{
+  "ENV": "prod",
+  "BASE_URL": "https://api.prod.example.com",
+  "API_TIMEOUT_MS": 15000,
+  "AUTH": {
+    "issuer": "https://login.microsoftonline.com/YOUR_TENANT_ID/v2.0",
+    "clientId": "YOUR_CLIENT_ID",
+    "redirectUrl": "__BUNDLE_ID__.auth://oauth/redirect",
+    "scopes": [
+      "openid",
+      "profile",
+      "offline_access",
+      "api://YOUR_API_CLIENT_ID/access_as_user"
+    ]
+  }
+}

package/template/env/staging.json

@@ -0,0 +1,16 @@
+{
+  "ENV": "staging",
+  "BASE_URL": "https://api.staging.example.com",
+  "API_TIMEOUT_MS": 15000,
+  "AUTH": {
+    "issuer": "https://login.microsoftonline.com/YOUR_TENANT_ID/v2.0",
+    "clientId": "YOUR_CLIENT_ID",
+    "redirectUrl": "__BUNDLE_ID__.auth://oauth/redirect",
+    "scopes": [
+      "openid",
+      "profile",
+      "offline_access",
+      "api://YOUR_API_CLIENT_ID/access_as_user"
+    ]
+  }
+}

package/template/gitignore

@@ -0,0 +1,19 @@
+node_modules/
+.expo/
+build/
+coverage/
+*.tgz
+.DS_Store
+.env*
+env/env-config.ts
+env/selected.json
+# Commit package-lock.json after npm install.
+# Native projects are generated by npx expo prebuild; commit them if customizing native code.
+ios/Pods/
+ios/build/
+android/.gradle/
+android/app/build/
+android/build/
+android/local.properties
+*.keystore
+*.jks

package/template/index.js

@@ -0,0 +1,2 @@
+import 'react-native-gesture-handler';
+import './src/bootstrap';

package/template/index.repack.js

@@ -0,0 +1,14 @@
+import { Script, ScriptManager } from '@callstack/repack/client';
+
+if (__DEV__) {
+  ScriptManager.shared.addResolver(
+    async scriptId => ({
+      url: Script.getDevServerURL(scriptId),
+      cache: false,
+    }),
+    { key: '__APP_NAME__-dev-chunks', priority: 1 },
+  );
+}
+
+// Keep app/native modules behind the federation bootstrap boundary.
+import('./src/bootstrap');

package/template/jest.config.cjs

@@ -0,0 +1,29 @@
+const aliases = require('./aliases.cjs');
+const moduleNameMapper = {};
+for (const [alias, target] of Object.entries(aliases)) {
+  const escaped = alias.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  moduleNameMapper[`^${escaped}$`] = `<rootDir>/${target.replace(/^\.\//, '')}`;
+  moduleNameMapper[`^${escaped}/(.*)$`] = `<rootDir>/${target.replace(
+    /^\.\//,
+    '',
+  )}/$1`;
+}
+
+module.exports = {
+  preset: 'react-native',
+  testMatch: ['<rootDir>/__tests__/**/*.test.[jt]s?(x)'],
+  transform: {
+    '^.+\\.[jt]sx?$': [
+      'babel-jest',
+      {
+        presets: ['module:@react-native/babel-preset'],
+        babelrc: false,
+        configFile: false,
+      },
+    ],
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!((jest-)?react-native|@react-native|@thanhphi/miniapp-sdk|immer)/)',
+  ],
+  moduleNameMapper,
+};

package/template/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require('expo/metro-config');
+const config = getDefaultConfig(__dirname);
+config.transformer.babelTransformerPath = require.resolve('react-native-svg-transformer/expo');
+config.resolver.assetExts = config.resolver.assetExts.filter(ext => ext !== 'svg');
+config.resolver.sourceExts.push('svg');
+module.exports = config;

package/template/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "0.0.1",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "lint": "eslint src App.tsx",
+    "start": "expo start",
+    "start:expo": "expo start",
+    "start:mf": "REPACK=1 react-native start --port __PORT__ --config rspack.config.cjs",
+    "start:mf:device": "REPACK=1 react-native start  --host 0.0.0.0 --port __PORT__ --config rspack.config.cjs",
+    "start:mf:reset": "REPACK=1 react-native start --port __PORT__ --config rspack.config.cjs --reset-cache",
+    "bundle:mf:ios": "node scripts/clean-mini-app-output.js ios && REPACK=1 react-native bundle --platform ios --dev false --minify true --entry-file index.repack.js --config rspack.config.cjs --bundle-output build/generated/ios/index.bundle --assets-dest build/generated/ios",
+    "bundle:mf:android": "node scripts/clean-mini-app-output.js android && REPACK=1 react-native bundle --platform android --dev false --minify true --entry-file index.repack.js --config rspack.config.cjs --bundle-output build/generated/android/index.bundle --assets-dest build/generated/android",
+    "env:staging": "node scripts/sync-env.js staging",
+    "env:beta": "node scripts/sync-env.js beta",
+    "env:prod": "node scripts/sync-env.js prod",
+    "start:staging": "node scripts/sync-env.js staging && expo start",
+    "start:beta": "node scripts/sync-env.js beta && expo start",
+    "start:prod": "node scripts/sync-env.js prod && expo start",
+    "ios:staging": "node scripts/sync-env.js staging && expo run:ios",
+    "ios:beta": "node scripts/sync-env.js beta && expo run:ios",
+    "ios:prod": "node scripts/sync-env.js prod && expo run:ios",
+    "android:staging": "node scripts/sync-env.js staging && expo run:android",
+    "android:beta": "node scripts/sync-env.js beta && expo run:android",
+    "android:prod": "node scripts/sync-env.js prod && expo run:android",
+    "typecheck": "tsc --noEmit",
+    "test": "jest --runInBand --watchman=false"
+  },
+  "dependencies": {
+    "@react-navigation/native": "7.2.2",
+    "@react-navigation/native-stack": "7.14.12",
+    "@reduxjs/toolkit": "2.11.2",
+    "@tanstack/react-query": "5.62.11",
+    "@thanhphi/miniapp-sdk": "0.1.0",
+    "@thanhphi/ui360": "0.2.0",
+    "expo": "~55.0.0",
+    "expo-dev-client": "~55.0.32",
+    "react": "19.2.0",
+    "react-native": "0.83.6",
+    "react-native-app-auth": "8.1.0",
+    "react-native-calendars": "1.1314.0",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "~5.6.2",
+    "react-native-screens": "~4.23.0",
+    "react-native-svg": "15.15.4",
+    "react-native-worklets": "0.8.1",
+    "react-redux": "9.2.0",
+    "react-native-unistyles": "3.2.5",
+    "react-native-nitro-modules": "0.36.5",
+    "expo-image": "~55.0.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/runtime": "^7.25.0",
+    "@callstack/repack": "^5.2.5",
+    "@callstack/repack-plugin-expo-modules": "^5.2.5",
+    "@callstack/repack-plugin-reanimated": "^5.2.5",
+    "@module-federation/enhanced": "^0.19.1",
+    "@react-native-community/cli": "20.0.0",
+    "@react-native-community/cli-platform-android": "20.0.0",
+    "@react-native-community/cli-platform-ios": "20.0.0",
+    "@react-native/babel-preset": "0.83.6",
+    "@react-native/eslint-config": "0.83.6",
+    "@react-native/metro-config": "0.83.6",
+    "@react-native/typescript-config": "0.83.6",
+    "@rspack/core": "1.7.12",
+    "@svgr/webpack": "8.1.0",
+    "@types/jest": "29.5.13",
+    "@types/react": "19.2.0",
+    "@types/react-test-renderer": "19.1.0",
+    "babel-jest": "29.6.3",
+    "babel-plugin-module-resolver": "5.0.3",
+    "babel-preset-expo": "~55.0.8",
+    "eslint": "8.19.0",
+    "jest": "29.6.3",
+    "prettier": "2.8.8",
+    "react-native-svg-transformer": "1.5.3",
+    "react-test-renderer": "19.2.0",
+    "typescript": "5.8.3"
+  },
+  "engines": {
+    "node": ">=20"
+  }
+}