AAD B2C (MSAL) with Expo and react-native-msal error on init - react-native

I'm using expo#4.5.2 and react-native-msal#4.0.0
I've copied the B2CClient class from b2cClient.ts provided in the example directory of react-native-msal and my initialization is set up the same as in App.tsx example provided as well (https://github.com/stashenergy/react-native-msal/tree/master/example/src).
My configuration is the following:
auth: {
clientId: '<CLIENT_ID>',
authorityBase: 'https://example.b2clogin.com/tfp/example.onmicrosoft.com',
policies: {
signInSignUp: 'B2C_1_mySignupPolicy',
passwordReset: 'B2C_1_myPasswordResetPolicy',
},
redirectUri: Platform.select({
android: 'msauth://com.company.app/l5rSw0yVmvlj7l5rSw0yWAYk5tfVb2j%2F',
default: undefined,
}),
},
I've done the additional step for expo (https://github.com/stashenergy/react-native-msal/blob/master/docs/expo_setup.md). But I get a warning in my editor: Failed to resolve plugin for module "react-native-msal" (I'm using the same version of react-native-msal that was used when the setup example was written)
I can still build the app regardless of this warning. But when b2cClient.init() runs I get this error:
[TypeError: null is not an object (evaluating '_nativeModule.default.createPublicClientApplication')]
Supposedly this package should work with expo and my configuration is the same as the example. How do I fix this?

Related

Why nuxt.config.js build.babel is ignored on app start, but work on app update?

My nuxt.config.js file has the following section
build: {
babel: {
presets (_, [_1, _2]) {
return [['#babel/preset-env', {}]]
},
plugins: [
['#babel/plugin-transform-runtime',
{
regenerator: true
}]
]
}
}
If I start my app (yarn dev), this section is ignored, and I've got regeneratorRuntime is not defined error instead of backend answer when I call my REST API (server middleware). But if after that (while server is up and running) I perform some changes in nuxt.config.js (i.e. set regenerator to false and then again to true), app is beeing regenerated and my REST API starts working fine.
yarn generate fails with ERROR ServerMiddleware Error: regeneratorRuntime is not defined
How to make it working always?

sentry expo logs error when enableInDevelopment is set to false or omitted

I have a react native expo managed app using react-native-sentry. According to the docs here: Sentry Expo Docs disabled by default in dev when encountering an error in dev it should be no op. I'm getting an error logged:
config Object {
"debug": true,
"defaultIntegrations": false,
"deployEnvironment": "default",
"dsn": "my-valid-dsn",
"environment": "local",
}
[sentry-expo] Disabled Sentry in development. Note you can set Sentry.init({ enableInExpoDevelopment: true });
Sentry Logger [Error]:, [SentryError: SDK not enabled, will not capture event.]
at http://192.168.0.110:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:267225:41 in anonymous
at node_modules/sentry-expo/node_modules/#sentry/utils/dist/logger.js:26:4 in consoleSandbox
at http://192.168.0.110:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:267222:20 in anonymous
at node_modules/sentry-expo/node_modules/#sentry/utils/dist/syncpromise.js:72:26 in cachedHandlers.forEach$argument_0
at node_modules/sentry-expo/node_modules/#sentry/utils/dist/syncpromise.js:67:12 in _executeHandlers
at http://192.168.0.110:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:268617:30 in anonymous
at node_modules/sentry-expo/node_modules/#sentry/utils/dist/syncpromise.js:82:12 in SyncPromise
at http://192.168.0.110:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:268594:28 in anonymous
at http://192.168.0.110:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:274894:79 in anonymous
at node_modules/sentry-expo/node_modules/#sentry/hub/dist/hub.js:381:8 in Hub.prototype._invokeClient
at http://192.168.0.110:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:274350:24 in anonymous
at node_modules/sentry-expo/node_modules/#sentry/minimal/dist/index.js:16:28 in callOnHub
at node_modules/sentry-expo/node_modules/#sentry/minimal/dist/index.js:30:8 in captureException
at App.js:34:2 in App
at App.js:46:27 in initStripe
- ... 16 more stack frames from framework internals
Code snippet:
export default function App() {
console.log('config', getConfig().sentry);
Sentry.init(getConfig().sentry);
Sentry.Native.captureException(new Error("Oops!"));
npm list sentry-expo
npm list sentry-expo
client# /Users/blah/Repositories/blah-blah/client
└── sentry-expo#4.2.0
I expected no logging. Any help or advice would be appreciated!

Using Quasar Notify plugin in Storybook mdx file (Quasar v2, Storybook, Vue3)

I'm having some issues with the Notify plugin from Quasar. I have already defined the plugin in quasar.config.js and made the necessary imports according to the Quasar documentation. However, I am still facing the error of $q.notify being undefined in the .mdx story file. In Quasar V1, the error was not generated and the code works fine. Thanks in advance!
For anyone interested, I solved it by adding the following in the storybook preview.js file:
app.use(Quasar, {
plugins: {
Notify,
},
config: {
notify:{},
},
}

TypeError: Cannot read properties of undefined (reading 'call') on build but not dev

I am running a vite.js app with web3 installed.
When I run the app in dev mode, all works fine but when I run it in production mode (build) it fails with:
"TypeError: Cannot read properties of undefined (reading 'call')".
I can confirm that the error comes from the contract method generated from my ABI:
contract.methods.isOwner(sender).call({from: sender}, function (err, res)
If I comment this line out I wont get the error.
You can reproduce the error by using my test repo:
download my test repo:
https://github.com/nybroe/web3_vite_call_of_undefined/tree/main
follow the readme with repo steps:
setup:
download the repro
navigate to "app"
npm install
dev test (which works)
npm run dev
check the console - no errors
build test (which breaks)
npm run build
npm run preview
check the console - you will see the following errors: "TypeError: Cannot read properties of undefined (reading 'call')"
https://stackoverflow.com/a/69021714
I use the option 2
In your vite.config.js, add web3:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})

Custom Module is not installed on the kurento media server but appears on the kurento-media-server --list

I am trying to develop a custom module for the Kurento-media-server but i have find two roadblocks,following the instructions on the documentation i have been able to:
create the custom module folder with the command:
kurento-module-scaffold.sh <module_name> <output_directory>
and them generate the files with:
cmake .. -DCMAKE_INSTALL_PREFIX=/usr && make && sudo make install
i have added two lines to the bgRemoverFilterOpenCVImpl on the /src/server/objects/bgRemoverFilterOpenCVImpl.cpp file so the filter adds a hello world text to the image.
void bgRemoverFilterOpenCVImpl::process (cv::Mat &mat)
{
cv::Point textOrg(50, 50);
putText( mat, "Hello World", textOrg, 1, 2, cv::Scalar(0, 0, 0) );
}
i them build the .deb file with debuild -us -uc and install it successfully so that when i run the kurento-media-server --list command i see my new custom module on the list:
....
bgRemoverFilter
bgremoverfilter.bgRemoverFilter
....
i them generated the js client code with the command cmake .. -DGENERATE_JS_CLIENT_PROJECT=TRUE and added the js generated folder to my node.js project using npm link for test purposes i am using the Kurento-Chroma project from the Kurento-node-repository so i have modified it to register my module and to create my custom filter instead of the chroma one. for this made changes to the server.js file on lines 28 and 249:
...
//kurento.register('kurento-module-chroma');
kurento.register('kurento-module-bgremoverfilter');
...
pipeline.create('bgremoverfilter.bgRemoverFilter', options, function(error, filter) {
if (error) {
return callback(error);
}
return callback(null, webRtcEndpoint, filter);
});
the node application runs correctly but when i start the loopback to get my videofeed with the filter applied it sends this error message:
Error message from server: Exiting with error SyntaxError: Module 'bgRemoverFilter' is not installed in the Kurento Media Server
despite the module being loaded on kurento-media-server --list the app cant create the filter object, i thought this was a naming issue so when i create a one word name custom module like "harel" to avoid camel case naming problems and install it i get on the list:
...
harel
harel.harel
...
and when trying to create and use this filter on the same kurento-chroma example i get a different error:
SyntaxError: sink param should be a MediaElement, not harel
at ChecktypeError (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client/lib/checkType.js:32:10)
at checkMediaElement (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client-core/lib/abstracts/MediaElement.js:1082:11)
at checkType (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client/lib/checkType.js:84:25)
at WebRtcEndpoint.MediaElement.connect (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client-core/lib/abstracts/MediaElement.js:489:3)
at connectMediaElements (/home/ubuntu/www/kurento-chroma/server.js:260:20)
at /home/ubuntu/www/kurento-chroma/server.js:197:17
at /home/ubuntu/www/kurento-chroma/server.js:254:20
at callback2 (/home/ubuntu/www/kurento-chroma/node_modules/kurento-client/lib/KurentoClient.js:527:7)
at /home/ubuntu/www/kurento-chroma/node_modules/kurento-client/lib/KurentoClient.js:385:7
at Object.dispatchCallback [as callback] (/home/ubuntu/www/kurento-chroma/node_modules/kurento-jsonrpc/lib/index.js:613:9)
so, am i missing something on the installation process? i suspect there is something wrong with the JS generated code in the first case.
on the second case when using a single word name, why does this work? the app is able to create the filter but then fails when trying to connect it to the webrtcEndPoint
i have look at all the questions and threads i could find but did'nt get any answers. here is a repository with my custom filter code including the generated js library
please help, if more clarifications or details are needed request them.
UPDATE
i wrote to one of the kurento developers that recommended i use kurento-media-server --version to get the actual list of loaded modules, this is a followup to that:
kurento-media-server --version returns:
Version: 6.7.0~1.g6ebaa27
Found modules:
Module: 'backgroundremoval' version '0.0.1~3.g045ef96'
Module: 'bgremoverfilter' version '0.0.1~0.g3a1e793'
Module: 'chroma' version '6.6.1~3.g6df8f1d'
Module: 'core' version '6.6.3'
Module: 'elements' version '6.6.3'
Module: 'filters' version '6.7.0~1.g0314843'
Module: 'harel' version '0.0.1~0.gaec7e6d'
so yes backgroundremoval, bgremoverfilter and harel are the custom modules i have created and they are on the list.
i still dont know why when i use a camelcase name as bacgroundRemoverFilter i cant get the module to load in javascript althoug the generated code is loaded on my node.js project when it tries to create the filter the app sends the "module not installed error"
so i started using all minus names, for my module "harel" this gets loaded with no problems and when i try to create the media element with
pipeline.create('harel.harel')...
the filter gets created but them fails when a try to connect it to a webrtcEnpoint with
filter.connect(webRtcEndpoint, function(error) {
if (error) {
return callback(error);
}
return callback(null);
});
it returns the error: SyntaxError: sink param should be a MediaElement, not harel
turns out that error is send by /node_modules/kurento-client-core/lib/abstracts/MediaElement.js:489:3 when calling a function Checktype
checkType('MediaElement', 'sink', sink, {required: true});
so i added a console.log() after the filter its created to see what was different between the chroma filter and my custom filter, this is the result:
harel {
domain: null,
_events:
{ removeListener: [Function],
newListener: [Function],
_describe: [Function: bound emit],
_rpc: [Function: encodeRpc],
release: { [Function: bound onceWrapper] listener: [Function] } },
_eventsCount: 5,
_maxListeners: undefined,
id: 'ad5e2447-3801-4d96-81b4-c40390b16248_kurento.MediaPipeline/18e8c6b9-df88-4d52-851c- 8c664a26ee3d_harel.harel' }
ChromaFilter {
domain: null,
_events:
{ removeListener: [Function],
newListener: [Function],
_describe: [Function: bound emit],
_rpc: [Function: encodeRpc],
release: { [Function: bound onceWrapper] listener: [Function] } },
_eventsCount: 5,
_maxListeners: undefined,
id: '97f370b5-81ae-45e1-a979- dab6c1c4cd28_kurento.MediaPipeline/06658282-67bf-47bc- b006-9f0dbae01767_chroma.ChromaFilter' }
both objects have the same properties excetp for the id. so how come the same function works with ChromaFilter bu not with harel if the object passed is almost the same. This is were i am now. will keep digging.
The problem with my process was that i used npm link to add the generated client-js code to my node.js app. For that to work i had to install the kurento-client package on the client-js folder and when my app ran it will generate the custom plugin with a different kurento-client than the one it was using.
so even thought the Chroma-filter and my harel module looked the same they were from two different kurento-client classes.
instead of using npm-link i just copied the generated js-client code inside my node-modules folder and that did the trick.
hope this is usefull to people that find this error.