auth0 · subhankarmaiti · Jun 1, 2025 · Jun 17, 2025 · Jun 21, 2025 · Jun 23, 2025
@@ -1 +1 @@
-module.exports = require('./lib/commonjs/plugin/withAuth0');
+module.exports = require('./lib/module/plugin/withAuth0');
@@ -3,3 +3,9 @@ import App from './src/App';
 import { name as appName } from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);
+
+// This is the entry point for the React Native web application.
+if (typeof document !== 'undefined') {
+  const rootTag = document.getElementById('root');
+  AppRegistry.runApplication(appName, { rootTag });
+}
@@ -5,6 +5,8 @@
   "scripts": {
     "android": "react-native run-android",
     "ios": "react-native run-ios",
+    "web": "webpack serve --mode development",
+    "web:build": "webpack --mode production",
     "start": "react-native start",
     "build:android": "react-native build-android --extra-params \"--no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a\"",
     "build:ios": "react-native build-ios --mode Debug",
@@ -18,7 +20,8 @@
     "react-native": "0.79.2",
     "react-native-paper": "^5.14.0",
     "react-native-safe-area-context": "^5.4.0",
-    "react-native-screens": "^4.10.0"
+    "react-native-screens": "^4.10.0",
+    "react-native-web": "^0.20.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -31,7 +34,14 @@
     "@react-native/metro-config": "0.79.2",
     "@react-native/typescript-config": "0.79.2",
     "@types/react": "^19.1.3",
-    "react-native-builder-bob": "^0.40.10"
+    "babel-loader": "^10.0.0",
+    "babel-plugin-react-native-web": "^0.20.0",
+    "html-webpack-plugin": "^5.6.3",
+    "react-native-builder-bob": "^0.40.10",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2"
   },
   "engines": {
     "node": ">=20"

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Auth0 React Native Example Web App" />
+    <title>Auth0 React Native Example</title>
+    <style>
+      body {
+        margin: 0;
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+          'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+          sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      #root {
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
@@ -0,0 +1,115 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const appDirectory = path.resolve(__dirname);
+
+// This is needed for webpack to compile JavaScript.
+// Many OSS React Native packages are not compiled to ES5 before being
+// published. If you depend on uncompiled packages they may cause webpack build
+// errors. To fix this webpack can be configured to compile to the necessary
+// `node_module`.
+const babelLoaderConfiguration = {
+  test: /\.(js|jsx|ts|tsx)$/,
+  // Add every directory that needs to be compiled by Babel during the build.
+  include: [
+    path.resolve(appDirectory, 'index.js'),
+    path.resolve(appDirectory, 'src'),
+    path.resolve(appDirectory, '../src'), // Included react-native-auth0 source
+    path.resolve(__dirname, 'node_modules/@react-navigation'),
+    path.resolve(__dirname, 'node_modules/react-native-safe-area-context'),
+    path.resolve(__dirname, 'node_modules/react-native-screens'),
+    path.resolve(__dirname, 'node_modules/react-native-paper'),
+    path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
+  ],
+  use: {
+    loader: 'babel-loader',
+    options: {
+      cacheDirectory: true,
+      // The 'metro-react-native-babel-preset' preset is recommended to match React Native's packager
+      presets: ['@react-native/babel-preset'],
+      // Re-write paths to import only the modules needed by the app
+      plugins: ['react-native-web'],
+    },
+  },
+};
+
+// This is needed for webpack to import static images in JavaScript files.
+const imageLoaderConfiguration = {
+  test: /\.(gif|jpe?g|png|svg)$/,
+  use: {
+    loader: 'url-loader',
+    options: {
+      // name: '[name].[ext]',
+      esModule: false,
+    },
+  },
+};
+
+module.exports = {
+  entry: [
+    // load any web API polyfills
+    // path.resolve(appDirectory, 'polyfills-web.js'),
+    // your web-specific entry file
+    path.resolve(appDirectory, 'index.js'),
+  ],
+
+  // configures where the build ends up
+  output: {
+    filename: 'bundle.web.js',
+    path: path.resolve(appDirectory, 'dist'),
+  },
+
+  devServer: {
+    static: {
+      directory: path.join(__dirname, 'public'),
+    },
+    compress: true,
+    port: 3000,
+    historyApiFallback: true,
+    hot: true,
+    client: {
+      webSocketTransport: 'ws',
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
+    },
+    webSocketServer: 'ws',
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve(appDirectory, 'public/index.html'),
+    }),
+  ],
+
+  module: {
+    rules: [babelLoaderConfiguration, imageLoaderConfiguration],
+  },
+
+  resolve: {
+    // This will only alias the exact import "react-native"
+    alias: {
+      'react-native$': 'react-native-web',
+      'react-native-auth0': path.resolve(__dirname, '../src'),
+    },
+    // Add module resolution paths to help webpack find react-native-web
+    modules: [
+      path.resolve(__dirname, 'node_modules'),
+      path.resolve(__dirname, '../node_modules'),
+      'node_modules',
+    ],
+    // If you're working on a multi-platform React Native app, web-specific
+    // module implementations should be written in files using the extension
+    // `.web.js`.
+    extensions: [
+      '.web.js',
+      '.web.ts',
+      '.web.jsx',
+      '.web.tsx',
+      '.js',
+      '.ts',
+      '.tsx',
+    ],
+  },
+};
@@ -3,11 +3,16 @@
   "title": "React Native Auth0",
   "version": "5.0.0-beta.3",
   "description": "React Native toolkit for Auth0 API",
-  "main": "lib/commonjs/index.js",
-  "module": "lib/module/index.js",
-  "types": "lib/typescript/src/index.d.ts",
-  "react-native": "src/index.ts",
-  "source": "src/index.ts",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "src",
     "lib",
@@ -40,7 +45,7 @@
     "bootstrap": "cd example && npm ci",
     "ci": "yarn install --immutable && yarn prepare",
     "clean": "del-cli lib out android/build example/android/build example/android/app/build example/ios/build",
-    "prepare": "husky && bob build && rm -rf lib/*/package.json",
+    "prepare": "husky && bob build",
     "example:android": "cd example && npm run android",
     "example:ios": "cd example && npm run ios",
     "precommit": "pretty-quick --staged"
@@ -70,15 +75,20 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
+    "@auth0/auth0-spa-js": ">=2.2.0",
     "react": ">=19.0.0",
     "react-native": ">=0.78.0"
   },
   "peerDependenciesMeta": {
+    "@auth0/auth0-spa-js": {
+      "optional": true
+    },
     "expo": {
       "optional": true
     }
   },
   "devDependencies": {
+    "@auth0/auth0-spa-js": "^2.2.0",
     "@commitlint/config-conventional": "^17.0.2",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
@@ -185,8 +195,12 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
       "typescript"
     ]
   },
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		module.exports = require('./lib/commonjs/plugin/withAuth0');
		module.exports = require('./lib/module/plugin/withAuth0');