I am working on a Xero integration and am having some issues setting up the XeroClient from the SDK. We are currently working in a React app written with Typescript.
Currently I am importing Xero SDK like this:
import { XeroClient } from 'xero-node';
And defining the client like this:
const xero = new XeroClient({
clientId: client_id,
clientSecret: client_secret,
redirectUris: [redirectUri],
scopes: scopes.split(' '),
});
Xero-node version: 4.0.6
React version: 16.12.0
But when compiling the app I get the following errors. Do you have any ideas as to what might be happening?
Console Logs
Browser Error
Might be related to this existing question.
Currently the xero-node project requires a backend to authenticate.. Is this a react SPA, or you are just setting up the API calls in the component?
Will OAuth 2.0 support desktop/mobile/single-page apps that can’t keep a client secret confidential?
At the moment, we require that your app can keep a client secret confidential. We are currently evaluating the PKCE extension to better support SPAs and mobile apps.
https://developer.xero.com/faq/oauth2/oauth-non-secret
Your Console error looks like its just the Unused vars expression.. Here is some context on what that is ( https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md )
Your Secondary browser error makes me think that you are using an older version of Node.. We need to add an .npmrc that forces a supported node version - are you using an older Node VSN?
Related
Simple setup:
React App created with create-react-app
ASP.NET Core web API - a couple of controllers (currently no security until I make it work)
Both the API and Application are deployed to Azure.
When I run the app locally with configured proxy (I contact the deployed API on Azure) it works correctly makes the calls.
If I try the API directly from my machine it works too (PostMan for example)
When I open the deployed React APP - The application loads correctly but the call to the API doesn't get proxy(ed). What I mean it's not returning 404, 403 - it returns status 200, but makes the call to the app itself instead of proxy the request to the API.
I've tried both using "proxy" configuration in package.json as well as using "http-proxy-middleware". Both cases work with locally running app, but not deployed. Here is the configuration of the proxy:
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: 'https://XXXXXX.azurewebsites.net',
changeOrigin: true,
})
);
};
I suppose it's something related to the configuration of the node server used when I deploy to azure, but I don't have a clue what.
I've used the following tutorial for deployment: https://websitebeaver.com/deploy-create-react-app-to-azure-app-services
But as seen from content there is no proxy part in it.
After long troubleshooting I realize the issue was due to wrong understanding of the proxy configuration.
So I was not realizing the proxy configuration is respected only in debug mode and totally ignored into prod build. And of course while debugging the issue I was not realizing the Azure Deployment pipe was doing production build. So the resolution was to detect the production/dev on application layer and inject correct URL.
Here I hit another issue - process.env.NODE_ENV, which I was using to distinguish between development and production was undefined into my index.tsx - it was available in App.tsx and all its children, but not in index.tsx where my dependency container was initialized.
What resolved my issue is package called dotenv. Then I've just imported it into index.tsx and the process.env was available.
import * as dotenv from 'dotenv';
I have a web app using the following amplify resources:
Auth
API
Function
Hosting
I have been having issues with the Auth service giving the following network error when going through the Auth0 flows:
error message in the headers:
x-amzn-errormessage: IdentityPool 'us-east-2:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found.
Error message in console:
POST https://cognito-identity.us-east-2.amazonaws.com/ 400
So I am trying to completely remove the Auth section and try and build it again from scratch.
However, when I run:
amplify remove auth
it removes the Auth in my local code, but then won't allow me to "amplify push" or "amplify publish" because the auth service can not be found 🤦🏼♂️🤦🏼♂️🤦🏼♂️ and I get this message:
Template error: instance of Fn::GetAtt references undefined resource auththisismyappg986421b An error occurred during the push operation: Template error: instance of Fn::GetAtt references undefined resource auththisismyappg986421b
Anyone know how to solve this? or advice on how to get
AWS Amplify - React - React Router (using protected routes) to all play along nicely?
Do you have any other resources that depend on auth? (api, storage, etc.)
If you do, when you do remove auth you get this warning:
You have configured resources that might depend on this Cognito resource. Updating this Cognito resource could have unintended side effects.
Judging from you message you might have an API that depends on your Auth. Look at amplify/api/YOURAPI/parameters.json, you should have
{
"AppSyncApiName": "YOURAPI",
"AuthCognitoUserPoolId": {
"Fn::GetAtt": [
"auththisismyappg986421b",
"Outputs.UserPoolId"
]
}
}
Therefore a dependency to your deleted auth still exists and Amplify does not like that.
What you can do is create your new auth from scratch, then you'll get a new userPoolID let's say auththisismyappgXXXXXXX and replace every instances of auththisismyappg986421b with auththisismyappgXXXXXXX.
Edit: by the way if anyone has a way to do it more cleanly through amplify CLI that would be nice :)
I am trying to deploy my SSR app in Firebase originally forked from, after doing some modification in the app.
Which works fine when I do sudo firebase serve --only functions,hosting but throwing error when I do firebase deploy.
The reproducible repo has a package.json.
I am using the public directory as my function directory as well.
However, even if I am using a different function directory for my cloud functions, I see the same errors.
Function failed on loading user code. Error message:
Code in file index.js can't be loaded. Is there a syntax error in your code?
Detailed stack trace: TypeError: c(...) is not a function
at Object.<anonymous> (/user_code/assets/app.server.js:1:28950)
at Object.module.exports.n (/user_code/assets/app.server.js:1:29283)
...
Functions deploy had errors.
To continue deploying other features (such as database), run:
firebase deploy --except functions
Error: Functions did not deploy properly.
It is possible, but you cannot serve static assets with cloud functions. You need a mix of firebase functions and firebase hosting.
The guys at Firebase already thought on this and you also have an implementation available.
Check the following documentation:
Overview
Dynamic Content
Code Example
Youtube Video
Note: There is a delay that you need to take into consideration when using cloud functions.
When a new instance handles its first request, the response time suffers, which is called a cold start
More info
The problem is that firebase hosting only supports SPAs, which means that SSR is out of the picture, you need to run your SSR server in a different env where you can run nextJS, or if you're using a static page generator you could upload the files directly compromising on the ability to refresh the content, although, I'm sure a solution with cloud functions and gatsby is feasable.
Tl;DR: You won't get SSR out of Firebase Hosting
We currently have a Ionic v1 project that calls an API implemented as a Google App Engine application. This Ionic app runs with Ionic serve, PhoneGap, and when deployed to Android/iOS.
We are now trying to deploy to the web using Firebase hosting.
The initial HTML/JS code all runs correctly until we reach an $http.get call to the Google App Engine. What happens then is that the request reaches the GAE server and is processed correctly there with a response being sent back. But in the client code, the response.data property is the contents of the Firebase application’s index.html rather than the response that was supplied from GAE.
We don’t know why this is happening, or how to fix it, but here are some relevant facts:
When we run the app on a device using PhoneGap or via the Google Playstore, the URL by which we access GAE is the same URL if we were accessing GAE from a browser. But, when we run the app via “ionic serve” we must use a proxy to work around a CORS issue. What we do is to specify a simplified URL in the Ionic code, and then provide a mapping of that simplified URL to the GAE’s actual URL in a file called “ionic.project” which looks something like this:
{
"name": "proxy-example",
"app_id": "",
"proxies": [
{
"path": "/api",
"proxyUrl": "http://cors.api.com/api"
}
]
}
When we attempt to deploy the app via either “firebase deploy” or “firebase serve” we must use the proxy version of the URL in our $http.get call. Otherwise the call does not reach the GAE server at all. It is not clear how Firebase knows to use “ionic.project” for the proxy mapping.
We are not using “Angularfire”, only the standard AngularJS library that is packaged with Ionic 1.x
Thanks for any help you can offer.
I am currently writing a web app and am using AWS Amplify.
I created my API Gateway and my lambdas before using Amplify so I imported my existing API to Mobile Hub.
My API gateway has 2 stages dev and prod.
According to the Amplify documentation here is the code to call my API from my app.
API.get(apiName, path, myInit).then(response => {
// Add your code here
}).catch(error => {
console.log(error.response)
});
apiName is auto generated by Mobile Hub and is always ...amazonaws.com/dev
path will be /items for example
resulting in a call being made to ...amazonaws.com/dev/items
I haven't seen anything in Amplify or AWS documentation to be able to call ...amazonaws.com/prod/items using the Amplify library.
I tried to edit the mobile-hub-project.yml and change it from :
features:
cloudlogic: !com.amazonaws.mobilehub.v0.CloudLogic
components:
apiName: !com.amazonaws.mobilehub.v0.API
attributes:
...
sdk-generation-stage-name: dev
to :
features:
cloudlogic: !com.amazonaws.mobilehub.v0.CloudLogic
components:
apiName: !com.amazonaws.mobilehub.v0.API
attributes:
...
sdk-generation-stage-name: prod
and push the new configuration but the behaviour is still the same.
Could anyone help me to manage multiple stages using Amplify ?
can you check the file aws-exports.js on aws_cloud_logic_custom array. there each endpoint has an attribute called name which is the one you use with the Amplify. You can edit the endpoint by changing to the stage you want to use. By default aws-exportsuses dev stage.