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

package/template/src/modules/auth/screens/LoginScreen.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Button, UIText } from '@thanhphi/ui360';
+import { ActivityIndicator, ScrollView, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import type {} from '../../../themes';
+import { uiGeometry } from '../../../themes/ui-geometry';
+import { useAuth } from '../hooks/use-auth';
+
+export default function LoginScreen() {
+  const {
+    theme: { color },
+  } = useUnistyles();
+  const { spacing } = uiGeometry;
+  const auth = useAuth();
+  const insets = useSafeAreaInsets();
+  return (
+    <ScrollView
+      contentInsetAdjustmentBehavior="automatic"
+      contentContainerStyle={[
+        styles.content,
+        { paddingBottom: insets.bottom + spacing.xxl },
+      ]}
+    >
+      <View style={styles.intro}>
+        <UIText variant="title" weight="600" accessibilityRole="header">
+          Đăng nhập để tiếp tục
+        </UIText>
+        <UIText color="content2">
+          {auth.isStandalone
+            ? auth.canSignIn
+              ? 'Đăng nhập bằng tài khoản được cấu hình cho ứng dụng.'
+              : 'Cấu hình issuer, clientId và redirectUrl trong env, rồi tạo lại native app để sử dụng OIDC.'
+            : 'Mini app cần phiên đăng nhập từ MySGR. Host phải hỗ trợ và truyền hostCapabilities theo contract SDK hiện tại.'}
+        </UIText>
+      </View>
+      {auth.message && (
+        <UIText selectable accessibilityRole="alert" color="danger">
+          {auth.message}
+        </UIText>
+      )}
+      {auth.pending && (
+        <ActivityIndicator
+          accessibilityLabel="Đang đăng nhập"
+          color={color.primary500}
+        />
+      )}
+      {auth.isStandalone ? (
+        <Button
+          label={auth.pending ? 'Đang đăng nhập…' : 'Đăng nhập'}
+          disabled={!auth.canSignIn}
+          loading={auth.pending}
+          onPress={() => {
+            void auth.signIn();
+          }}
+        />
+      ) : (
+        <Button
+          label="Quay lại MySGR"
+          onPress={() => {
+            void auth.closeMiniApp();
+          }}
+        />
+      )}
+    </ScrollView>
+  );
+}
+
+const { spacing } = uiGeometry;
+const styles = StyleSheet.create(({ color }) => ({
+  content: {
+    padding: spacing.xxl,
+    gap: spacing.xxl,
+    flexGrow: 1,
+    backgroundColor: color.base3,
+  },
+  intro: { gap: spacing.lg },
+}));

package/template/src/modules/auth/services/oidc.ts

@@ -0,0 +1,64 @@
+import {
+  authorize,
+  refresh,
+  type AuthConfiguration,
+} from 'react-native-app-auth';
+import { AuthError } from '@thanhphi/miniapp-sdk';
+import config from '@env-config';
+import type { OidcOperations } from './standalone-session';
+
+const authConfig: AuthConfiguration = {
+  issuer: config.AUTH.issuer,
+  clientId: config.AUTH.clientId,
+  redirectUrl: config.AUTH.redirectUrl,
+  scopes: [...config.AUTH.scopes],
+};
+
+export function isOidcConfigured(value: {
+  issuer: string;
+  clientId: string;
+  redirectUrl: string;
+  scopes: readonly string[];
+}): boolean {
+  const filled = (field: string) =>
+    Boolean(field.trim()) && !field.includes('YOUR_');
+  return (
+    filled(value.issuer) &&
+    filled(value.clientId) &&
+    filled(value.redirectUrl) &&
+    value.scopes.length > 0 &&
+    value.scopes.every(filled)
+  );
+}
+
+export const oidcOperations: OidcOperations = {
+  isConfigured: isOidcConfigured(config.AUTH),
+  async authorize() {
+    const result = await authorize(authConfig);
+    return {
+      accessToken: result.accessToken,
+      refreshToken: result.refreshToken || undefined,
+    };
+  },
+  async refresh(refreshToken) {
+    try {
+      const result = await refresh(authConfig, { refreshToken });
+      return {
+        accessToken: result.accessToken,
+        refreshToken: result.refreshToken || undefined,
+      };
+    } catch (error) {
+      if (error instanceof AuthError) throw error;
+      // AppAuth's documented OAuth token error for a revoked/expired refresh grant.
+      const code =
+        typeof error === 'object' && error !== null && 'code' in error
+          ? error.code
+          : undefined;
+      throw new AuthError(
+        code === 'invalid_grant' ? 'expired' : 'unavailable',
+        undefined,
+        error,
+      );
+    }
+  },
+};

package/template/src/modules/auth/services/standalone-session.ts

@@ -0,0 +1,121 @@
+import {
+  AuthError,
+  createSessionCoordinator,
+  type HostCapabilities,
+  type SessionSnapshot,
+} from '@thanhphi/miniapp-sdk';
+import type { AuthActions } from '../../../common/mini-app/types';
+
+export interface OidcTokens {
+  accessToken: string;
+  refreshToken?: string;
+}
+
+export interface OidcOperations {
+  isConfigured: boolean;
+  authorize(): Promise<OidcTokens>;
+  refresh(refreshToken: string): Promise<OidcTokens>;
+}
+
+/** Standalone owns its session. No credential is written to Redux or disk. */
+export function createStandaloneSession(operations: OidcOperations) {
+  let snapshot: SessionSnapshot = { sessionId: null, accessToken: null };
+  let refreshToken: string | undefined;
+  let generation = 0;
+  let disposed = false;
+  let loginPending: Promise<void> | undefined;
+  const listeners = new Set<(value: SessionSnapshot) => void>();
+  const publish = (next: SessionSnapshot) => {
+    snapshot = next;
+    for (const listener of listeners) listener({ ...snapshot });
+  };
+  const signOut = () => {
+    generation += 1;
+    refreshToken = undefined;
+    loginPending = undefined;
+    publish({ sessionId: null, accessToken: null });
+  };
+  const coordinator = createSessionCoordinator({
+    getSnapshot: () => ({ ...snapshot }),
+    async refresh(before) {
+      const credential = refreshToken;
+      if (!credential) throw new AuthError('expired');
+      const currentGeneration = generation;
+      const result = await operations.refresh(credential);
+      if (
+        disposed ||
+        currentGeneration !== generation ||
+        before.sessionId !== snapshot.sessionId
+      ) {
+        throw new AuthError('session-changed');
+      }
+      if (!result.accessToken) throw new AuthError('expired');
+      refreshToken = result.refreshToken || credential;
+      publish({ ...snapshot, accessToken: result.accessToken });
+      return result.accessToken;
+    },
+  });
+  const actions: AuthActions = {
+    isConfigured: operations.isConfigured,
+    signIn() {
+      if (disposed) return Promise.reject(new AuthError('unavailable'));
+      if (!operations.isConfigured) {
+        return Promise.reject(
+          new AuthError(
+            'unavailable',
+            'Hãy cấu hình OIDC trong env trước khi đăng nhập.',
+          ),
+        );
+      }
+      if (loginPending) return loginPending;
+      const attempt = ++generation;
+      const request = Promise.resolve().then(async () => {
+        if (disposed || attempt !== generation)
+          throw new AuthError('session-changed');
+        const result = await operations.authorize();
+        if (disposed || attempt !== generation)
+          throw new AuthError('session-changed');
+        if (!result.accessToken) throw new AuthError('unavailable');
+        refreshToken = result.refreshToken;
+        publish({
+          sessionId: `standalone-${attempt}`,
+          accessToken: result.accessToken,
+        });
+      });
+      loginPending = request;
+      const release = () => {
+        if (loginPending === request) loginPending = undefined;
+      };
+      request.then(release, release);
+      return request;
+    },
+    // Clears the local app session; provider-wide logout is a separate host policy.
+    signOut,
+  };
+  const capabilities: HostCapabilities = {
+    auth: {
+      getSnapshot: () => ({ ...snapshot }),
+      refreshIfNeeded: coordinator.refreshIfNeeded,
+      subscribe(listener) {
+        if (disposed) return () => {};
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      },
+    },
+    closeMiniApp: signOut,
+  };
+  return {
+    capabilities,
+    actions,
+    dispose() {
+      disposed = true;
+      generation += 1;
+      refreshToken = undefined;
+      snapshot = { sessionId: null, accessToken: null };
+      listeners.clear();
+      coordinator.dispose();
+    },
+  };
+}

package/template/src/navigation/MainStack.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  DefaultTheme,
+  DarkTheme,
+  NavigationContainer,
+  NavigationIndependentTree,
+} from '@react-navigation/native';
+import { useAppSelector } from '../redux/hooks';
+import {
+  selectIsAuthenticated,
+  selectSessionId,
+} from '../modules/auth/redux/selectors';
+import AuthenticationNavigator from '../modules/auth/navigation/AuthenticationNavigator';
+import ModuleNavigator from '../modules/__MODULE__/navigation/ModuleNavigator';
+import { useUnistyles } from 'react-native-unistyles';
+
+export function MainStack() {
+  const {
+    theme: { type, color },
+  } = useUnistyles();
+  const base = type === 'dark' ? DarkTheme : DefaultTheme;
+  const navigationTheme = {
+    ...base,
+    colors: {
+      ...base.colors,
+      background: color.base3,
+      card: color.background,
+      primary: color.primary500,
+      text: color.content1,
+      border: color.divider,
+      notification: color.danger,
+    },
+  };
+  const authenticated = useAppSelector(selectIsAuthenticated);
+  const sessionId = useAppSelector(selectSessionId);
+  return (
+    <NavigationIndependentTree>
+      <NavigationContainer
+        key={sessionId ?? 'signed-out'}
+        theme={navigationTheme}
+      >
+        {authenticated ? <ModuleNavigator /> : <AuthenticationNavigator />}
+      </NavigationContainer>
+    </NavigationIndependentTree>
+  );
+}

package/template/src/redux/RootReducers.ts

@@ -0,0 +1,8 @@
+import { combineReducers, createAction } from '@reduxjs/toolkit';
+import auth from '../modules/auth/redux/auth-slice';
+import home from '../modules/__MODULE__/redux/home-slice';
+
+export const resetApp = createAction('app/reset');
+const combined = combineReducers({ auth, home });
+export const rootReducer: typeof combined = (state, action) =>
+  combined(resetApp.match(action) ? undefined : state, action);

package/template/src/redux/hooks.ts

@@ -0,0 +1,5 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from './store';
+
+export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
+export const useAppSelector = useSelector.withTypes<RootState>();

package/template/src/redux/store.ts

@@ -0,0 +1,10 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { rootReducer } from './RootReducers';
+
+/** Factory: each mounted mini app has its own state. Tokens are never persisted. */
+export function createAppStore() {
+  return configureStore({ reducer: rootReducer });
+}
+export type AppStore = ReturnType<typeof createAppStore>;
+export type RootState = ReturnType<AppStore['getState']>;
+export type AppDispatch = AppStore['dispatch'];

package/template/src/services/application.ts

@@ -0,0 +1,87 @@
+import { QueryClient } from '@tanstack/react-query';
+import {
+  AuthError,
+  HttpError,
+  createMiniAppRuntime,
+  type HostCapabilities,
+  type SessionSnapshot,
+} from '@thanhphi/miniapp-sdk';
+import type { AuthActions } from '../common/mini-app/types';
+import { createApiClient } from '../library/networking/client';
+import { createAppStore } from '../redux/store';
+import { resetApp } from '../redux/RootReducers';
+import {
+  authenticationFailed,
+  sessionReceived,
+} from '../modules/auth/redux/auth-slice';
+
+export function createApplicationServices(
+  capabilities: HostCapabilities,
+  authActions?: AuthActions,
+) {
+  const runtime = createMiniAppRuntime(capabilities);
+  const store = createAppStore();
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60_000,
+        retry: (count, error) =>
+          !(error instanceof AuthError) &&
+          !(
+            error instanceof HttpError &&
+            ['cancelled', 'disposed'].includes(error.kind)
+          ) &&
+          count < 1,
+      },
+    },
+  });
+  let session: SessionSnapshot | undefined;
+  const receiveSession = (next: SessionSnapshot) => {
+    if (
+      session?.sessionId !== next.sessionId ||
+      (session?.accessToken && !next.accessToken)
+    ) {
+      // Cancellation reaches SDK fetch through React Query's AbortSignal.
+      void queryClient.cancelQueries();
+      queryClient.clear();
+      store.dispatch(resetApp());
+    }
+    session = { ...next };
+    store.dispatch(
+      sessionReceived({
+        sessionId: next.sessionId,
+        authenticated: Boolean(next.sessionId && next.accessToken),
+      }),
+    );
+  };
+  const unsubscribe = runtime.auth.subscribe(receiveSession);
+  receiveSession(runtime.auth.getSnapshot());
+  const api = createApiClient(runtime.auth, (error, failedSessionId) => {
+    if (runtime.auth.getSnapshot().sessionId !== failedSessionId) return;
+    if (error.kind === 'expired') {
+      void queryClient.cancelQueries();
+      queryClient.clear();
+      authActions?.signOut();
+      store.dispatch(resetApp());
+      store.dispatch(
+        authenticationFailed('Phiên đăng nhập đã hết hạn. Hãy đăng nhập lại.'),
+      );
+    }
+  });
+  runtime.onDispose(() => {
+    unsubscribe();
+    api.dispose();
+    void queryClient.cancelQueries();
+    queryClient.clear();
+    store.dispatch(resetApp());
+  });
+  return {
+    runtime,
+    store,
+    queryClient,
+    api,
+    authActions,
+    dispose: runtime.dispose,
+  };
+}
+export type ApplicationServices = ReturnType<typeof createApplicationServices>;

package/template/src/themes/colors/dark.ts

@@ -0,0 +1,90 @@
+import type { UIColors } from '@thanhphi/ui360';
+
+export const darkColors = {
+  backdrop: 'rgba(0,0,0,0.5)',
+  background: '#18181B',
+  base2: '#27272A',
+  base3: '#27272A',
+  divider: '#3F3F46',
+  focus: '#006FEE',
+
+  content1: '#FAFAFA',
+  content2: '#ADAEB5',
+  content3: '#797A85',
+  content4: '#636470',
+
+  textPrimary: '#FFFFFF',
+
+  default: '#3F3F46',
+  primary: '#B50101',
+  secondary: '#F5A524',
+  success: '#17C964',
+  warning: '#F5A524',
+  danger: '#F5222D',
+
+  gray50: '#18181B',
+  gray100: '#27272A',
+  gray200: '#3F3F46',
+  gray300: '#52525B',
+  gray400: '#71717A',
+  gray500: '#A1A1AA',
+  gray600: '#D4D4D8',
+  gray700: '#E4E4E7',
+  gray800: '#F4F4F5',
+  gray900: '#FAFAFA',
+
+  primary50: '#240000',
+  primary100: '#480000',
+  primary200: '#5B0101',
+  primary300: '#6D0101',
+  primary400: '#910101',
+  primary500: '#B50101',
+  primary600: '#C43434',
+  primary700: '#D36767',
+  primary800: '#E19999',
+  primary900: '#F0CCCC',
+
+  secondary50: '#312107',
+  secondary100: '#62420E',
+  secondary200: '#7B5312',
+  secondary300: '#936316',
+  secondary400: '#C4841D',
+  secondary500: '#F5A524',
+  secondary600: '#F7B750',
+  secondary700: '#F9C97C',
+  secondary800: '#FBDBA7',
+  secondary900: '#FDEDD3',
+
+  success50: '#052814',
+  success100: '#095028',
+  success200: '#0E793C',
+  success300: '#12A150',
+  success400: '#17C964',
+  success500: '#45D483',
+  success600: '#74DFA2',
+  success700: '#A2E9C1',
+  success800: '#D1F4E0',
+  success900: '#E8FAF0',
+
+  warning50: '#312107',
+  warning100: '#62420E',
+  warning200: '#936316',
+  warning300: '#C4841D',
+  warning400: '#F5A524',
+  warning500: '#F7B750',
+  warning600: '#F9C97C',
+  warning700: '#FBDBA7',
+  warning800: '#FDEDD3',
+  warning900: '#FEFCE8',
+
+  danger50: '#310709',
+  danger100: '#620E12',
+  danger200: '#7B1117',
+  danger300: '#93141B',
+  danger400: '#C41B24',
+  danger500: '#F5222D',
+  danger600: '#F74E57',
+  danger700: '#F97A81',
+  danger800: '#FBA7AB',
+  danger900: '#FDD3D5',
+} as const satisfies UIColors;

package/template/src/themes/colors/light.ts

@@ -0,0 +1,90 @@
+import type { UIColors } from '@thanhphi/ui360';
+
+export const lightColors = {
+  backdrop: 'rgba(0,0,0,0.5)',
+  background: '#FFFFFF',
+  base2: '#FFF7F7',
+  base3: '#F7F7F7',
+  divider: '#F4F4F4',
+  focus: '#006FEE',
+
+  content1: '#232323',
+  content2: '#666666',
+  content3: '#AFB4B8',
+  content4: '#DBDFE2',
+
+  textPrimary: '#FFFFFF',
+
+  default: '#D4D4D8',
+  primary: '#B50101',
+  secondary: '#F5A524',
+  success: '#17C964',
+  warning: '#F5A524',
+  danger: '#F5222D',
+
+  gray50: '#FAFAFA',
+  gray100: '#F4F4F5',
+  gray200: '#E4E4E7',
+  gray300: '#D4D4D8',
+  gray400: '#A1A1AA',
+  gray500: '#71717A',
+  gray600: '#52525B',
+  gray700: '#3F3F46',
+  gray800: '#27272A',
+  gray900: '#18181B',
+
+  primary50: '#F8E6E6',
+  primary100: '#F0CCCC',
+  primary200: '#E19999',
+  primary300: '#D36767',
+  primary400: '#C43434',
+  primary500: '#B50101',
+  primary600: '#910101',
+  primary700: '#6D0101',
+  primary800: '#480000',
+  primary900: '#240000',
+
+  secondary50: '#FEF6E9',
+  secondary100: '#FDEDD3',
+  secondary200: '#FBDBA7',
+  secondary300: '#F9C97C',
+  secondary400: '#F7B750',
+  secondary500: '#F5A524',
+  secondary600: '#C4841D',
+  secondary700: '#936316',
+  secondary800: '#7B5312',
+  secondary900: '#62420E',
+
+  success50: '#E8FAF0',
+  success100: '#D1F4E0',
+  success200: '#A2E9C1',
+  success300: '#74DFA2',
+  success400: '#45D483',
+  success500: '#17C964',
+  success600: '#12A150',
+  success700: '#0E793C',
+  success800: '#095028',
+  success900: '#095028',
+
+  warning50: '#FEFCE8',
+  warning100: '#FDEDD3',
+  warning200: '#FBDBA7',
+  warning300: '#F9C97C',
+  warning400: '#F7B750',
+  warning500: '#F5A524',
+  warning600: '#C4841D',
+  warning700: '#936316',
+  warning800: '#62420E',
+  warning900: '#312107',
+
+  danger50: '#FEE9EA',
+  danger100: '#FDD3D5',
+  danger200: '#FBA7AB',
+  danger300: '#F97A81',
+  danger400: '#F74E57',
+  danger500: '#F5222D',
+  danger600: '#C41B24',
+  danger700: '#93141B',
+  danger800: '#620E12',
+  danger900: '#310709',
+} as const satisfies UIColors;

package/template/src/themes/index.ts

@@ -0,0 +1,38 @@
+import { lightColors } from './colors/light';
+import { darkColors } from './colors/dark';
+import { create360Theme, type UIThemeOptions } from '@thanhphi/ui360';
+import { StyleSheet } from 'react-native-unistyles';
+import { ratioW } from '../library/utils/responsive';
+
+function createAppTheme(mode: 'light' | 'dark', options: UIThemeOptions = {}) {
+  const colors = mode === 'dark' ? darkColors : lightColors;
+  return create360Theme({
+    // Match the 360 host; default tokens are scaled exactly once during creation.
+    scale: ratioW(1),
+    ...options,
+    mode,
+    colors: { ...colors, ...options.colors },
+  });
+}
+
+// Pure theme values: importing a screen must never reconfigure the host runtime.
+export const appThemes = {
+  light: createAppTheme('light'),
+  dark: createAppTheme('dark'),
+};
+
+/** Only standalone entries configure native themes; hosted App never calls this. */
+export function configureStandaloneTheme(options: UIThemeOptions = {}) {
+  StyleSheet.configure({
+    themes: {
+      light: createAppTheme('light', options),
+      dark: createAppTheme('dark', options),
+    },
+    settings: { initialTheme: options.mode ?? 'light' },
+  });
+}
+
+type AppThemes = typeof appThemes;
+declare module 'react-native-unistyles' {
+  export interface UnistylesThemes extends AppThemes {}
+}

package/template/src/themes/standalone.ts

@@ -0,0 +1,6 @@
+import type { UIThemeOptions } from '@thanhphi/ui360';
+import { configureStandaloneTheme } from './index';
+
+// Change dev-only palette/mode overrides here. Hosted App never imports this file.
+export const standaloneThemeOptions: UIThemeOptions = { mode: 'light' };
+configureStandaloneTheme(standaloneThemeOptions);

package/template/src/themes/ui-geometry.ts

@@ -0,0 +1,12 @@
+import { createUITheme } from '@thanhphi/ui360';
+import { ratioW } from '../library/utils/responsive';
+import { lightColors } from './colors/light';
+
+// Only export geometry. The palette here never replaces the active host colors.
+// Pure factory: no Unistyles registration, no dependency on host geometry.
+const { spacing, radius, typography } = createUITheme({
+  colors: lightColors,
+  scale: ratioW(1),
+});
+
+export const uiGeometry = { spacing, radius, typography };