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 :)
Related
I am trying to deploy my first react app.
I have followed all the steps according to the instructions.
But when it comes to app deployment I keep getting the same message.
Unexpected response from import status service. The import task is probably still running; check the Sitecore logs for details.
Status message:
Status: [403]
Can anyone help me with this?
Hosts added
Confings and the error
Api is working
please go through my comment on : 403 error when importing a new JSS app to Sitecore 10.2
also make sure your API key and layout service is configured properly e.g. http://myapp.siteco.re/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY_ID}
Similar kind of issue: 403 error when importing a new JSS app to Sitecore 10.2
I have a React website that I'm hosting and deploying through Netlify. I have it currently set up so that I'm able to log in using their authentication service, which is useful. However, it only works on my Localhost. When I try to use it on the Netlify hosted site, I get the following error:
Uncaught (in promise) Error: Illegal url for new iframe - https://%22trail-app-7d2e3.firebaseapp.com%22/__/auth/iframe?apiKey=********&appName=%5BDEFAULT%5D&v=9.2.0&eid=p&usegapi=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.ILxaxn5iF9E.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCP4GH4pdEaIiZe1k-cWfBRo9KTiAQ%2Fm%3D__features__#id=I0_1635906033796&_gfid=I0_1635906033796&parent=https%3A%2F%2Ftrailapp.netlify.app&pfname=&rpctoken=37134086
at Object._.Zk (cb=gapi.loaded_0:154)
at Fl (cb=gapi.loaded_0:165)
at Object._.Gl (cb=gapi.loaded_0:166)
at Object._.Nl (cb=gapi.loaded_0:172)
at _.Ym.openChild (cb=gapi.loaded_0:310)
at _.Ym.open (cb=gapi.loaded_0:315)
at iframe.ts:81
at l (runtime.js:63)
at Generator._invoke (runtime.js:294)
at Generator.next (runtime.js:119)
It seems as though it's trying to use that URL to reference a script that presents the iframe with the Google login. I'm not sure what permissions would be causing it not to work. I've enabled everything I know to.
I am using a .env file to hide my API information from a repository and have the values set up under "Environment Variables" on Netlify. If anyone has any feedback it'd be greatly appreciated!
You need to add your hosted domain in firebase as I have added my own domain here.
TLDR: React app interfaces properly with Flask API on PythonAnywhere when hosted locally but not when a static build is hosted on Netlify. Perhaps the proxy information is missing from the build?
EDIT 1:
Here are the errors in the browser console:
I've created a Flask API that pulls machine learning models from Amazon S3 and returns predictions on data input from POST requests. I've put this API on PythonAnywhere.
I've also created a React frontend which allows me to input data, submit it, and then receive the prediction. When I host this app locally, it behaves appropriately (i.e. connecting to the Flask app on PythonAnywhere, loading the models properly, and returning the predictions).
I've tried deploying a static build of the React app on Netlify. It behaves as expected, except for anything that requires interacting with the Flask App. I have a button for testing that simply calls the Flask app in a GET request, and even this is throwing a 404 error.
I checked the error and server logs on PythonAnywhere and see nothing. The only thing I can thik of is that my proxy which lists the domain of the PythonAnywhere app in my package.json file is for some reason unincluded in the build, but I don't know why this would be the case.
Has anyone else run into a similar issue or know how I can check to see if the proxy information is included in the static build? Thanks in advance!
Thanks to #Glenn for the help.
Solution:
I realized (embarrassingly late) that the requests were not going to the right address, as can be seen in the browser console error above. I was using a proxy during development, so the netlify app was calling itself rather than the pythonanywhere API. I simply went into my react code and edited the paths to pythonanywhere. E.g.
onClick={ async () => {
const response = await fetch("/get", {...}}
became
onClick={ async () => {
const response = await fetch("https://username.pythonanywhere.com/get", {...}}
As #Glenn mentioned, there may have been a CORS issue as well, so in my flask application I utilized flask_cors. I can't say for sure that this was necessary given that I didn't test removing it after the fetch addresses had changed, but I suspect that it is necessary.
Hopefully this can help someone else
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?
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