authorize() method doesn't fire for CustomAuthorizer - javascript

I've upgraded an ember-cli app with a custom authenticator and authorizer for simple-auth from 0.0.40 and ember-cli-simple-auth 0.6.3 to versions 0.0.46 and 0.6.7, respectively.
Authentication works fine, but the authorize() method doesn't fire, so the security token isn't added to the header and http 401 errors are returned.
I've read elsewhere that this could be a lack of crossOriginWhitelist issue, but I have this in my index.html:
<script>
window.EmberENV = {{EMBER_ENV}};
<!-- Ember Simple Auth relies on window.ENV to read its configuration -->
window.ENV = window.EmberENV;
window.ENV['simple-auth'] = {
authorizer: 'authorizer:custom',
crossOriginWhitelist: window.EmberENV.APP.crossOriginWhitelist
};
</script>
which seems fine to me.
I can eliminate the 401 error by adding this to the ajax call in my beforeModel() authorization check:
beforeSend: function (request)
{
request.setRequestHeader('Authorization', 'Bearer ' + self.get('session.token'));
},
but that ain't right, of course; it's just a band-aid.
Anyone have any ideas?
Thanks,
BillyB

I found the problem.
The only changes I made other than upgrading the ember-cli version was to switch from ember-simple-auth to ember-cli-simple-auth, the Ember Simple Auth base library packaged as an Ember CLI Addon.
The latter accepts its configuration in ember-cli's environment.js instead of in an inline script in index.html, as I had done above. This worked:
ENV['simple-auth'] = {
authenticationRoute: 'login',
routeAfterAuthentication: 'index',
routeIfAlreadyAuthenticated: 'index',
authorizer: 'authorizer:custom',
crossOriginWhitelist: ENV.APP.crossOriginWhitelist
Note to folks at simple-auth: this was not well-documented, or at least I missed it.
-BillyB

Related

How to get Azure AD authentication to work in production with msal-browser in my Next.js application?

The following implementation of msal works without issues when I run it on localhost. But when I deploy it to an Azure App Service the clientId and/or tenantID seems to become undefined, even when I tried experimenting with placing the id strings directly into the file. Here is the error I get when i try to click the login button in production:
GET https://login.microsoftonline.com/undefined/v2.0/.well-known/openid-configuration 400 (Bad Request)
Uncaught (in promise) ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientAuthError: openid_config_error: Could not retrieve endpoints. Check your authority and verify the .well-known/openid-configuration endpoint returns the required endpoints. Attempted to retrieve endpoints from: https://login.microsoftonline.com/undefined/v2.0/.well-known/openid-configuration
at t [as constructor] (_app-3866deb516d5bf6f9628.js:1)
at new t (_app-3866deb516d5bf6f9628.js:1)
at Function.t.createEndpointDiscoveryIncompleteError (_app-3866deb516d5bf6f9628.js:1)
at Function.<anonymous> (_app-3866deb516d5bf6f9628.js:1)
at _app-3866deb516d5bf6f9628.js:1
at Object.throw (_app-3866deb516d5bf6f9628.js:1)
at s (_app-3866deb516d5bf6f9628.js:1)
And here is the msal implementation:
import * as msal from "#azure/msal-browser";
function redirUri() {
if (process.env.NODE_ENV == "development") {
return "/"
} else {
return "https://somewebsitename.azurewebsites.net/"
}
}
const msalConfig = {
auth: {
clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID,
authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID}`,
redirectUri: redirUri()
}
};
const msalInstance = new msal.PublicClientApplication(msalConfig);
export { msalInstance }
What is the correct way to do this?
You can't get the app setting in Azure app service configuration.
You can get the ClientID and tenant Id from your application configuration by doing this.
process.env.clientId and process.env.tenantId
Ensure you have configured the following settings on the portal:

(Gatsby-Strapi) Error: Request failed with status code 404

I want to follow the instruction :https://strapi.io/blog/building-a-static-website-using-gatsby-and-strapi#allowaccess
But encounter Error: Request failed with status code 404
Node.js version:
v10.13.0
npm version:
6.14.6
Strapi version:
3.1.0-alpha.5
Operating system:
mac
Which example is causing problem?
strapi.io/blog/building-a-static-website-using-gatsby-and-strapi#allowaccess
What is the current behavior?
Graphql Query doesn't work.
the steps to reproduce the problem:
$ gatsby develop
success open and validate gatsby-configs
success load plugins - 2.011s
success onPreInit - 0.004s
success initialize cache - 0.018s
success copy gatsby files - 0.102s
success onPreBootstrap - 0.017s
success createSchemaCustomization -
info Starting to fetch data from Strapi
info Starting to fetch data from Strapi
info Starting to fetch data from Strapi
ERROR #11321 PLUGIN
"gatsby-source-strapi" threw an error while running the sourceNodes lifecycle:
Request failed with status code 404
Error: Request failed with status code 404
createError.js:16 createError
[portfolio_v4]/[gatsby-source-strapi ]/[axios]/lib/core/createError.js:16 :15
settle.js:18 settle
[portfolio_v4]/[gatsby-source-strapi ]/[axios]/lib/core/settle.js:18:12
http.js:202 IncomingMessage.handleSt reamEnd
[portfolio_v4]/[gatsby-source-strapi ]/[axios]/lib/adapters/http.js:202:1 1
task_queues.js:84 processTicksAndRej ections
internal/process/task_queues.js:84:2 1
What is the expected behavior?
What is the expected behavior?
Doesn't work when I try to get from gatsby
http://localhost:8000/___graphql
There is no method allStrapiblogs on http://localhost:8000/___graphql
Please share your gatsby-config.js screen, the gatsby-source-strapi section.
this could be caused by the collectionTypes/singleTypes in the gatsby-source-strapi, or your USERS & PERMISSIONS PLUGIN (roles) in strapi is not set
I've changed contentTypes to collectionTypes
Also there is a new version (v4) of strapi and to make gatsby work with this new version, you need to use the following gatsby-source plugin.
npm install --save gatsby-source-strapi#relate-app/gatsby-source-strapi
This plugin wants a token which you can create at http://localhost:1337/admin/settings/api-tokens
before testing the new plugin make sure to clean out your gatsby cache by using the following command:
gatsby clean
{
resolve: "gatsby-source-strapi",
options: {
apiURL: "http://localhost:1337",
collectionTypes: ["Article", "User", 'Test'],
// Extract images from markdown fields.
markdownImages: {
typesToParse: {
Article: ["body"],
ComponentBlockBody: ["text"],
},
},
// Only include specific locale.
locale: "en", // default to all
// Include drafts in build.
preview: true, // defaults to false
// Use application token.
token:
'Your-strapi-api-token',
// Add additional headers.
headers: {},
},
},
There has also been a article about a new plugin, but this refers to another one which didn't work for me.
https://strapi.io/blog/introducing-the-new-gatsby-source-strapi-plugin
When added "${DOMAIN}/api" on apiURL it worked for me with strapi v4
apiURL: "http://localhost:1337/api",
{
resolve: "gatsby-source-strapi",
options: {
apiURL: "http://localhost:1337/api",
collectionTypes: [`messages`],
// Extract images from markdown fields.
markdownImages: {
typesToParse: {
Article: ["body"],
ComponentBlockBody: ["text"],
},
},
// Only include specific locale.
locale: "en", // default to all
// Include drafts in build.
preview: true, // defaults to false
// Use application token.
token: "token",
// Add additional headers.
headers: {},
},
},
This code solved my problem.
{
resolve:'gatsby-source-strapi',
options:{
apiURL:'*http://localhost:1337/admin/content-manager/collectionType/api::*',
collectionTypes: ['propiedads','paginas','categorias'],
queryLimit:1000
}
}

How to set proxy for different API server using Nuxt?

So I have 2 applications:
an Adonis API server accessible via http://10.10.120.4:3333
A SSR app using Nuxt.js accessible via http://10.10.120.4:80
The Nuxt.js app is accessible outside using url http://my-website.com. I have axios module with this config
axios: {
baseURL: '0.0.0.0:3333/api',
timeout: 5000
}
Now the problem is, when I am requesting data with asyncData it works, but when the request was made from outside asyncData, say created() for example, it throws an error saying the url http:0.0.0.0:3333 is missing which is true since it's already running in the browser and not in the server.
The first solution that I've tried is to change the baseURL of the axios module to this
axios: {
baseURL: 'http://my-website.com/api',
timeout: 5000
}
But it seems nuxt server can't find it, so I think the solution is to make proxy and installed #nuxtjs/proxy.
And this is my proxy config in nuxt.config.js
{
proxy: {
'/api': 'http://my-website.com:3333',
}
}
and then I just changed my axios baseURL to
http://my-website.com/api
But again it didn't work.
My question is, how do you deal with this kind of scenario? Accessing different server from browser?
When using Proxy in a nuxt project you need to remove baseUrl and set proxy to true as seen below.
axios: {
// Do away with the baseUrl when using proxy
proxy: true
},
proxy: {
// Simple proxy
"/api/": {
target: "https://test.com/",
pathRewrite: { "^/api/": "" }
}
},
when making a call to your endpoint do:
// append /api/ to your endpoints
const data = await $axios.$get('/api/users');
checkout Shealan article

Assistance With Setting up Gatsby and WordPress

I have worked on several web dev projects but have never actually built one from the group up (setting up all the backends was already done by the time I arrived).
Am working on building a site and I need some guidance as the process is incredibly confusing to me.
I want to use WordPress as a headless CMS (so that I can still post and manage the site from WP without editing code) and I was looking to use Gatsby.js.
I have a site on WordPress.com (call it: mysite.wordpress.com). I have created my Gatsby site, run it, nice, and installed the gatsby-source-wordpress package. Finally, I have my config file as follows:
module.exports = {
siteMetadata: {
title: `MySite`,
description: `Testing`,
author: `Me`
},
plugins: [
{
resolve: "gatsby-source-wordpress",
options: {
baseUrl: "mysite.wordpress.com",
protocol: "http",
hostingWPCOM: false,
useACF: true,
verboseOutput: true,
auth: {
htaccess_user: "xxxx#gmail.com", // My actual general WP account email
htaccess_pass: "yyyy", // My actual general WP account pass. I know this is bad practice, I will put this into a dotenv file, I just want to make sure this works
htaccess_sendImmediately: false,
},
},
},
]
}
However, this is not working and I am not sure why. When I run gatsby develop I get the following output:
ERROR #11321 PLUGIN
"gatsby-source-wordpress" threw an error while running the sourceNodes lifecycle:
Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
- Function.keys
- fetch.js:534 getValidRoutes
[emrose]/[gatsby-source-wordpress]/fetch.js:534:26
- fetch.js:148 fetch
[emrose]/[gatsby-source-wordpress]/fetch.js:148:23
- task_queues.js:93 processTicksAndRejections
internal/process/task_queues.js:93:5
- gatsby-node.js:87 async Object.exports.sourceNodes
[emrose]/[gatsby-source-wordpress]/gatsby-node.js:87:18
- api-runner-node.js:235 async runAPI
[emrose]/[gatsby]/dist/utils/api-runner-node.js:235:20
- api-runner-node.js:328 async module.exports
[emrose]/[gatsby]/dist/utils/api-runner-node.js:328:18
- source-nodes.js:86 async module.exports
[emrose]/[gatsby]/dist/utils/source-nodes.js:86:3
- index.js:403 async module.exports
[emrose]/[gatsby]/dist/bootstrap/index.js:403:3
- develop.js:419 async module.exports
[emrose]/[gatsby]/dist/commands/develop.js:419:7
warn The gatsby-source-wordpress plugin has generated no Gatsby nodes. Do you need it?
Despite several hours of googling and youtube'ing, I am not quite clear on how to proceed or if the site I have on my general WP account is even accessible in this format.
I have tried looking for a solution online for quite some time now without success. Keeping in mind that I do intend this site to eventually go live, any guidance on next steps would be awesome (:

Meteor TypeError: braintree.setup is not a function

I am trying to work on braintree for our app but it seems like I keep on getting same error. I installed braintree-web successfully (twice) and I am importing braintree. I am using the correct client token.
TypeError: braintree.setup is not a function
import braintree from 'braintree-web';
Template.braintree_payment.onRendered(function(){
var clientToken = "abc....";
console.log("logging");
braintree.setup(clientToken, "dropin", {
container: "payment-form"
});
});
Which version of braintree-web are you using? Version 2 should indeed have a braintree.setup function, but version 3 does not.
Version 3 should be initialised like so:
braintree.client.create({
authorization: 'CLIENT_AUTHORIZATION'
}, function (err, clientInstance) {
braintree.hostedFields.create(/* ... */);
});
Check out the docs for version 3 here: https://developers.braintreepayments.com/guides/client-sdk/setup/javascript/v3

Categories