I'm new to web development in general. started learning Javascript last year.
I created a website for testing. Before implementing app check, phone auth worked fine.
I'm using reCaptcha enterprise for app check.
I get this error: Uncaught (in promise) TypeError: recaptchaVerifier.render is not a function
implementing app check:
const { initializeAppCheck, ReCaptchaEnterpriseProvider } = require("firebase/app-check");
const appCheck = initializeAppCheck(firebaseApp, {
provider: new ReCaptchaEnterpriseProvider('**********************************'),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
My javascript code for implementing phone auth:
$('#phone-method').click(function() {
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);
// Sign in with phone flow
})
Apparently, there was a problem with enterprise but they have since fixed it:
https://github.com/firebase/firebase-js-sdk/issues/6133
Same problem to me, but this thread in Github help me:
https://github.com/firebase/firebase-js-sdk/issues/6133
Here you have a nice sample inside.
It seems that appCheck only works great with ReCaptchaV3Provider. You will just have to change:
initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(*****),
isTokenAutoRefreshEnabled: true
})
to:
initializeAppCheck(app, {
provider: new ReCaptchaV3Provider(*****),
isTokenAutoRefreshEnabled: true
})
And I recommend to change the way to initialize captcha, set to invisible like this:
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container',
{ 'size': 'invisible' },
auth);
Related
We’re using Azure B2C to authenticate the users in the Word add-in. The library in Angular (14.1.2) that we use is MSAL which works as expected on Windows.
However, when using it on Mac, the redirect inside the add-in dialog gets stuck and doesn’t go to the Azure B2C page. It writes the cookies and local storage, but never redirects.
angular 14.1.2
azure/msal-angular 2.5.1
azure/msal-browser 2.32.1
Call
this.msalService.loginRedirect().subscribe();
Msal Configuration
`export function msalInstanceFactory(appConfigService: AppConfigService): IPublicClientApplication {
const appConfig = appConfigService.config;
return new PublicClientApplication({
auth: {
clientId: appConfig.aadB2CClientId,
authority: 'https://${appConfig.aadB2CDomain}/${appConfig.aadB2CTenant}/${appConfig.aadB2CSIPolicy}',
redirectUri: appConfig.aadB2CRedirectUri,
postLogoutRedirectUri: getLocationOriginWithPath('logout'),
knownAuthorities: [appConfig.aadB2CDomain],
navigateToLoginRequestUrl: false,
},
cache: {
cacheLocation: BrowserCacheLocation.LocalStorage,
storeAuthStateInCookie: isIE,
},
system: {
loggerOptions: {
loggerCallback: msalLoggerCallback,
logLevel: LogLevel.Verbose,
piiLoggingEnabled: true,
},
},
});
}
export function msalGuardConfigFactory(appConfigService: AppConfigService): MsalGuardConfiguration {
return {
interactionType: InteractionType.Redirect,
authRequest: {
scopes: appConfigService.config.aadB2CConsentScopes,
loginHint: getLoginHint(),
},
};
}`
The funny fact is that if I set a break point just before the execution of the loginRedirect and then press continue it works. So, I tried to set a timeout before that to see if it works but it doesn't.
Also tried to disable ITP security in Safari, but didn't take any effect.
Here's a simple example on the forgot password reset page of my app, I would want to bypass the server side and just have the password reset to succeed on click so I would write a test and use the custom test store like so:
const customStore = {
state() {
return {
Authentication: {
passwordResetSuccess: false,
},
};
},
mutations: {
SET_RESET_PASSWORD_SUCCESS(state) {
state.Authentication.passwordResetSuccess = true;
},
},
actions: {
forgotPasswordResetPassword() {
this.commit('SET_RESET_PASSWORD_SUCCESS');
},
},
};
Then I could include the custom store in my beforeEach() and it worked great. I've tried everything I can think of to get this to work with pinia, but it doesn't seem to work.
I'm using jest along with vue/test-utils.
I basically tried just creating the test pinia store, but I can't figure out how to get the component to use the custom test store.
const useCustomStore = defineStore('AuthenticationStore', {
state: () => ({
passwordResetSuccess: false,
}),
actions: {
forgotPasswordResetPassword() {
this.passwordResetSuccess = true;
},
},
});
const authenticationStore = useCustomStore();
I can't directly add it as a plugin because it can't find an active instance of pinia.
I went through this guide: https://pinia.vuejs.org/cookbook/testing.html#unit-testing-a-store
and I also tried using jest mock as described here: https://stackoverflow.com/a/71407557/4697639
But it still failed.
If anyone has any idea how to create a custom store that can be used by the component and actually hits the custom actions, I could really use some help figuring this out. Thank you!!
Tao mentioned in the comments that this isn't a good way to do unit tests. I will mark this as resolved and fix how I do the testing.
I am trying to follow the Strapi v4.0.0 guide on https://docs.strapi.io/developer-docs/latest/developer-resources/plugin-api-reference/server.html#entry-file for extending the users-permission plugin to add a custom route/controller, but so far have been unsuccessful. I add the custom files as stated in the docs, but there is no change in the UI.
I managed to get this to work for normal API highlighted in yellow, but was unable to do so for the users-permission plugin
In the previous version 3.6.8 this functionality was allowed through the extensions folder.
Am I missing something from the new guide, I even tried copying the files from node_modules > #strapi > plugin-users-permission and adding a new route and method to the exiting controller file but it still does not reflect the change in the section where we assign different route permission to roles. The user-permission plugin still shows the original routes, with no change.
Thanks,
I ran into this thread while researching pretty much the same issue, and I wanted to share my solution.
First of all, I found this portion of the documentation more useful than the one you referenced: https://docs.strapi.io/developer-docs/latest/development/plugins-extension.html
My goal was the write a new route to validate JWT tokens based on the comment made here: https://github.com/strapi/strapi/issues/3601#issuecomment-510810027 but updated for Strapi v4.
The solution turned out to be simple:
Create a new folder structure: ./src/extensions/user-permissions if it does not exist.
Create a new file ./src/extensions/user-permissions/strapi-server.js if it does not exist.
Add the following to the file:
module.exports = (plugin) => {
plugin.controllers.<controller>['<new method>'] = async (ctx) => {
// custom logic here
}
plugin.routes['content-api'].routes.push({
method: '<method>',
path: '/your/path',
handler: '<controller>.<new method>',
config: {
policies: [],
prefix: '',
},
});
return plugin;
};
If you're unsure what controllers are available, you can always check the API documentation or console.log(plugin) or console.log(plugin.controllers).
After the admin server restarts, you should see your new route under the user-permissions section as you would expect, and you can assign rights to it as you see fit.
My full strapi-server.js file including the logic to validate JWT:
module.exports = (plugin) => {
plugin.controllers.auth['tokenDecrypt'] = async (ctx) => {
// get token from the POST request
const {token} = ctx.request.body;
// check token requirement
if (!token) {
return ctx.badRequest('`token` param is missing')
}
try {
// decrypt the jwt
const obj = await strapi.plugin('users-permissions').service('jwt').verify(token);
// send the decrypted object
return obj;
} catch (err) {
// if the token is not a valid token it will throw and error
return ctx.badRequest(err.toString());
}
}
plugin.routes['content-api'].routes.push({
method: 'POST',
path: '/token/validation',
handler: 'auth.tokenDecrypt',
config: {
policies: [],
prefix: '',
},
});
return plugin;
};
When exporting routes you need to export the type, either content-api or admin. Look at the Strapi email plugin in node_modules for example, change the folder and file structure in your routes folder to match that and then you will be able to set permissions in the admin panel.
If your Strapi server is using Typescript, make sure that you name your extension files accordingly. So instead of strapi-server.js, you would need to name your file strapi-server.ts.
SDK Version: 37
Platforms(Android/iOS/web/all): Android (Expo Client)
I’m using useAuthRequest from expo-auth-session to fetch an authentication code for itsme, a Belgian OpenID Connect authentication provider. I'm using the Expo client on Android.
The code looks like this:
export default function SignUpScreen() {
const discovery = useAutoDiscovery('https://e2emerchant.itsme.be/oidc');
const [request, response, promptAsync] = useAuthRequest(
{
clientId: Itsme.CLIENT_ID,
redirectUri: makeRedirectUri(),
scopes: [
'openid',
'service:CURVO_TEST_SHAREDATA',
'profile',
'email',
'phone',
'address'
],
extraParams: {
claims: JSON.stringify({
userinfo: {
'tag:sixdots.be,2016-06:claim_nationality': null,
'tag:sixdots.be,2016-06:claim_city_of_birth': null,
'tag:sixdots.be,2016-06:claim_eid': null,
'tag:sixdots.be,2017-05:claim_photo': null
}
})
}
},
discovery
);
return (
<TouchableOpacity onPress={promptAsync}>Log in</TouchableOpacity>
);
When the “Log in” button is pressed, the following happens:
(OK) The itsme application is correctly opened. I can tell that the scopes have also been correctly communicated.
(OK) I can authenticate within the itsme application with my itsme PIN code.
(OK) The itsme application then closes, which is expected.
(OK) My app is re-opened.
(NOT OK) The response variable becomes equal to { type: 'dismiss' }.
Whatever I do, the response is always “dismiss”. I find it strange because the docs say:
If the authentication is dismissed manually with AuthSession.dismiss() , the result is { type: 'dismiss' } .
However, I never call AuthSession.dismiss().
It looks like it’s failing right at the last step, when it’s supposed to parse the authorization code out of the response URL.
I tried several things:
starting Expo in all three modes: tunnel, lan, localhost
adding a path to the redirect URI, like makeRedirectUri({ path: '/itsme' })
the AppState.currentState “trick” described in a (related?) GitHub issue.
None of these tries worked and I’m out of ideas. Any thoughts or suggestions? Or maybe how to debug inside `expo-auth-session to see what’s going on?
Thank you in advance.
I'm building an app using VueJS and Electron, now I'm trying to create a login using the #websanova/vue-auth package and everything goes well (login, logout, route protection, etc..) the only thing I'm stuck on is that everytime I log in and refresh or restart electron, it kicks me back to the login page. The weird thing is, it refreshed the token successfully, if I look in the localstorage it is updated and when I try to make a manual request using a REST client the token works. I just can't get into the app using that token.
I'm using the latest versions of VueJS, vue-router, vue-resource and #websanova/vue-auth as of today (19-sep-2016).
The API side is a Laravel 5.3 installation and I'm using the tymondesigns/jwt-auth package to handle the JWT tokens.
this is how I use my routes:
'/': {
auth: true,
name: 'dashboard',
component: HomeView
},
'/login': {
auth: false,
name: 'login',
component: LoginView
}
The views are being compiled using browserify and vueify.
My login function is like this:
this.$auth.login({
body: this.body,
success: function () {
this.loading = false;
},
error: function () {
this.error.status = true;
this.loading = false;
this.body.password = '';
},
rememberMe: true
});
If you need more information in order to be able to help me, just let me know.
Edit: If you want to take a look, here are the links to the repo's:
API: https://github.com/luukhoeben/rmi-app-api
Electron app: https://github.com/luukhoeben/rmi-app-electron
Thanks,
Luuk
If you set
Vue.use(Auth, {
router: Router,
http: Vue.$http,
tokenExpired: () => {
return false
}
})
Setting tokenExpired to return false, like this, you will skip the token refresh all together, which is not that bad. Downside is that your clients will have an expired token at some point and will be forced to re-login.
Another method is to try and check when the token will expire and refresh based on that.