tessl/npm-expo-web-browser

Provides access to the system's web browser and supports handling redirects for React Native and Expo applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Expo Web Browser

Name: tessl/npm-expo-web-browser
Author: tessl

Expo Web Browser provides access to the system's web browser and supports handling redirects for React Native and Expo applications. It offers platform-specific implementations using SFSafariViewController and ASWebAuthenticationSession on iOS, and ChromeCustomTabs on Android, ensuring native browser experiences while maintaining security and performance.

Package Information

Package Name: expo-web-browser
Package Type: npm
Language: TypeScript
Installation: npx expo install expo-web-browser or npm install expo-web-browser

Core Imports

import * as WebBrowser from 'expo-web-browser';

For specific imports:

import { 
  openBrowserAsync, 
  openAuthSessionAsync, 
  WebBrowserOpenOptions,
  WebBrowserAuthSessionResult 
} from 'expo-web-browser';

CommonJS:

const WebBrowser = require('expo-web-browser');

Basic Usage

import * as WebBrowser from 'expo-web-browser';

// Open a simple web page
const result = await WebBrowser.openBrowserAsync('https://example.com');

// Open authentication session with redirect handling
const authResult = await WebBrowser.openAuthSessionAsync(
  'https://accounts.google.com/oauth/authorize?...',
  'myapp://redirect'
);

if (authResult.type === 'success') {
  console.log('OAuth success, redirect URL:', authResult.url);
}

Architecture

Expo Web Browser is built around platform-specific browser implementations:

iOS Implementation: Uses SFSafariViewController for general browsing and ASWebAuthenticationSession for authentication flows
Android Implementation: Uses Chrome Custom Tabs for native-like browser experience with session management capabilities
Web Implementation: Uses browser window.open() API with localStorage-based state management for authentication
Type System: Full TypeScript integration with comprehensive type definitions for all platforms

Capabilities

Browser Operations

Core browser functionality for opening web pages and managing browser sessions. Perfect for displaying content like privacy policies, terms of service, or general web content.

function openBrowserAsync(
  url: string, 
  browserParams?: WebBrowserOpenOptions
): Promise<WebBrowserResult>;

function dismissBrowser(): Promise<{ type: WebBrowserResultType.DISMISS }>;

Browser Operations

Authentication Sessions

Secure authentication session management with proper redirect handling for OAuth flows. Designed for authentication workflows that require secure token exchange and proper session isolation.

function openAuthSessionAsync(
  url: string,
  redirectUrl?: string | null,
  options?: AuthSessionOpenOptions
): Promise<WebBrowserAuthSessionResult>;

function dismissAuthSession(): void;

function maybeCompleteAuthSession(
  options?: WebBrowserCompleteAuthSessionOptions
): WebBrowserCompleteAuthSessionResult;

Authentication Sessions

Custom Tabs Management

Android-specific Custom Tabs optimization features for improved performance and user experience. These functions provide fine-grained control over Custom Tabs lifecycle.

function getCustomTabsSupportingBrowsersAsync(): Promise<WebBrowserCustomTabsResults>;

function warmUpAsync(browserPackage?: string): Promise<WebBrowserWarmUpResult>;

function mayInitWithUrlAsync(
  url: string, 
  browserPackage?: string
): Promise<WebBrowserMayInitWithUrlResult>;

function coolDownAsync(browserPackage?: string): Promise<WebBrowserCoolDownResult>;

Custom Tabs Management

Core Types

enum WebBrowserResultType {
  CANCEL = 'cancel',
  DISMISS = 'dismiss', 
  OPENED = 'opened',
  LOCKED = 'locked'
}

enum WebBrowserPresentationStyle {
  FULL_SCREEN = 'fullScreen',
  PAGE_SHEET = 'pageSheet',
  FORM_SHEET = 'formSheet',
  CURRENT_CONTEXT = 'currentContext',
  OVER_FULL_SCREEN = 'overFullScreen',
  OVER_CURRENT_CONTEXT = 'overCurrentContext',
  POPOVER = 'popover',
  AUTOMATIC = 'automatic'
}

interface WebBrowserResult {
  type: WebBrowserResultType;
}

interface WebBrowserRedirectResult {
  type: 'success';
  url: string;
}

type WebBrowserAuthSessionResult = WebBrowserRedirectResult | WebBrowserResult;

interface AuthSessionOpenOptions extends WebBrowserOpenOptions {
  preferEphemeralSession?: boolean;
}

interface WebBrowserCompleteAuthSessionOptions {
  skipRedirectCheck?: boolean;
}

interface WebBrowserCompleteAuthSessionResult {
  type: 'success' | 'failed';
  message: string;
}

type WebBrowserWindowFeatures = Record<string, number | boolean | string>;

type RedirectEvent = {
  url: string;
};