using react-native-app-auth with react-native-web

i am trying to use the login with Azure feature with React native javascript, i am using react native version: "react-native": "0.64.0", i am not using Expo,

it works fine on iOS and Android, however i am also using react-native-web, in order to have a web app too, my web configuration i think it has no issues, i will post my "webpack.config.js" in the end of the file but it simply doesn't work on web, i have this error:

This error: msgTypeError: Cannot read property 'authorize' of undefined

here is my code in Login.js

`import React, { useState } from 'react'; import { View, Text, TouchableOpacity, StyleSheet, Platform, Image, Button, Alert } from 'react-native'; import { Link } from "@react-navigation/web"; import { authorize } from 'react-native-app-auth';

const isWeb = Platform.OS === 'web';

class Login extends React.Component {

async loginwithMicrosoft() {

// base config const config = { issuer: 'https://login.microsoftonline.com/************myissueriD*********/v2.0', clientId: '/****myclientId*****/', redirectUrl: 'myApp://react-native-auths/', scopes: [ 'openid', 'offline_access', 'profile', 'User.Read', 'MailboxSettings.Read', 'Calendars.ReadWrite' ], };

try { const result = await authorize(config); console.log('-----AccessToken----' + result.accessToken) console.log('-----RefreshAccessToken----' + result.refreshToken) Alert.alert('-----AccessToken----' + result.accessToken) // result includes accessToken, accessTokenExpirationDate and refreshToken } catch (error) { console.log(error); alert("msg" +error) } }

.............. ..............

render() { return ( .............. .............. <TouchableOpacity onPress={() => this.loginwithMicrosoft()} style={styles.Btn}>

    </TouchableOpacity>

.............. ..............

here is my webpack.config.js:

` const path = require('path');

const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const appDirectory = path.resolve(__dirname); const {presets} = require(${appDirectory}/babel.config.js);

const compileNodeModules = [

'"@react-native-community/masked-view": "^0.1.10"', '"@react-navigation/native": "^5.9.4"', '"react": "17.0.1"', '"react-native": "0.64.0"', '"react-native-gesture-handler": "^1.10.3"', '"react-native-reanimated": "^2.1.0"', '"react-native-safe-area-context": "^3.2.0"', '"react-native-screens": "^3.1.1"', '"react-native-web": "^0.15.7"', '"react-navigation": "^4.4.4"', '"react-navigation-stack": "^2.10.4"', '"react-native-app-auth": "^6.2.0"', '"@microsoft/microsoft-graph-client": "^2.1.1"'

].map((moduleName) => path.resolve(appDirectory, node_modules/${moduleName}));

const babelLoaderConfiguration = { test: /.js$|tsx?$/, // Add every directory that needs to be compiled by Babel during the build. include: [ path.resolve(dirname, 'index.web.js'), // Entry to your application // path.resolve(dirname, 'App.web.tsx'), // Change this to your main App file path.resolve(dirname, 'App.js'), // Change this to your main App file path.resolve(dirname, './Components/User/Login.js'), // Change this to your main App file path.resolve(dirname, './Components/User/Register.js'), // Change this to your main App file path.resolve(dirname, './Routes/routes.js'), // Change this to your main App file

path.resolve(__dirname, 'src'),
...compileNodeModules,

], use: { loader: 'babel-loader', options: { cacheDirectory: true, presets, plugins: ['react-native-web'], }, }, };

const svgLoaderConfiguration = { test: /.svg$/, use: [ { loader: '@svgr/webpack', }, ], };

const imageLoaderConfiguration = { test: /.(gif|jpe?g|png|svg)$/, use: { loader: "url-loader", options: { name: "[name].[ext]", esModule: false, } } };

module.exports = { entry: { app: path.join(__dirname, 'index.web.js'), }, output: { path: path.resolve(appDirectory, 'dist'), publicPath: '/', filename: 'rnw_blogpost.bundle.js', }, resolve: { extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'], alias: { 'react-native$': 'react-native-web', }, }, module: { rules: [ babelLoaderConfiguration, imageLoaderConfiguration, svgLoaderConfiguration, ], }, plugins: [ new HtmlWebpackPlugin({ template: path.join(dirname, 'index.html'), }), new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ // See: https://github.com/necolas/react-native-web/issues/349 DEV__: JSON.stringify(true), }), ], }; `

Does any body has an idea how to make this work ? thanks

FormidableLabs / react-native-app-auth

using react-native-app-auth with react-native-web #626