Reference mobile App for TOTP & Push-Based Authentication

[DilshanSenarath]

Purpose

This pull request introduces a new Expo-based authenticator app under samples/authenticator-app. The changes lay the foundation for the app by adding configuration files, initial screens, routing, and development environment setup. The app includes basic navigation, authentication features, and platform-specific settings.

Project setup and configuration:

• Added samples/authenticator-app to the workspace, excluding it from certain build processes in pnpm-workspace.yaml.
• Created Expo project configuration with platform-specific settings, permissions, plugins, and app metadata in app.json.

App structure and routing:

• Implemented the root layout in app/_layout.tsx with stack navigation and screen configuration, using custom components and context providers.
• Added initial screens for home, account management, QR scanner, push authentication, and history, each with corresponding components and navigation logic.

Related Issues

• Production grade reference mobile App for TOTP & Push-Based Authentication wso2/product-is#25963

Related PRs

• N/A

Checklist

• Followed the CONTRIBUTING guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Unit tests provided. (Add links if there are any)

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines?
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets?

[Copilot]

Pull Request Overview

This pull request introduces a comprehensive React Native Expo-based authenticator application that provides TOTP (Time-based One-Time Password) and push notification authentication capabilities. The app is designed as a reference implementation for mobile authentication workflows.

• Establishes foundational project structure with TypeScript, routing, and platform configurations
• Implements core authentication features including QR code scanning, TOTP generation, and push notification handling
• Creates reusable UI components and context providers for state management

Reviewed Changes

Copilot reviewed 63 out of 66 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
samples/authenticator-app/package.json	Defines project dependencies including Expo, React Native, crypto libraries, and Firebase messaging
samples/authenticator-app/app.json	Configures Expo app metadata, permissions, and platform-specific settings
samples/authenticator-app/tsconfig.json	Sets up TypeScript configuration with strict mode and path aliases
samples/authenticator-app/config/app.config.json	Provides comprehensive theme and feature configuration for light/dark modes
samples/authenticator-app/src/utils/*.ts	Implements utility functions for QR validation, crypto operations, storage, and UI helpers
samples/authenticator-app/src/models/*.ts	Defines TypeScript interfaces for storage, authentication, UI theming, and crypto operations
samples/authenticator-app/src/contexts/*.tsx	Creates React contexts for account management, TOTP operations, and push authentication
samples/authenticator-app/src/components/*.tsx	Builds reusable UI components for QR scanning, authentication flows, and account management
samples/authenticator-app/app/*.tsx	Implements screen components and navigation layout for the app
pnpm-workspace.yaml	Excludes the authenticator app from workspace build processes

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

Pull Request Overview

Copilot reviewed 64 out of 67 changed files in this pull request and generated 6 comments.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The type 'Buffer' appears incorrect. Buffer doesn't take a generic type parameter. Should be 'string | Buffer'.

Suggested change

	private static encodeBase64Url(input: string | Buffer<ArrayBuffer>): string {
	private static encodeBase64Url(input: string | Buffer | ArrayBuffer): string {

[Copilot]

Using CSS string values like '50%' in React Native StyleSheet is not supported. Use numeric values or rely on the width/height to create circular shapes.

Suggested change

	borderRadius: '50%',
	alignItems: 'center',
	justifyContent: 'center',
	width: 'auto',
	height: 'auto',
	paddingVertical: 12,
	paddingHorizontal: 12
	borderRadius: 24,
	alignItems: 'center',
	justifyContent: 'center',
	width: 48,
	height: 48,
	// paddingVertical and paddingHorizontal are not needed for a circular button

[Copilot]

Hardcoded IP address in configuration may expose internal network information. Consider using environment variables or placeholder values for sensitive configuration.

Suggested change

	"host": "http://10.10.16.152:8082"
	"host": "${DEV_HOST}"

[asgardeo-github-bot]

⚠️ No Changeset found

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go.

If these changes should result in a version bump, you need to add a changeset.

Refer Release Documentation to learn how to add a changeset.