Cannot read property 'substring' of undefined Error in React when adding Social sign-in (OAuth) with AWS Amplify - reactjs

I'm working with ReactJs and trying to add Social sign-in using AWS Amplify, i follow all the steps (provide the redirect signin/signout URI, Google Web Client ID and secret for my OAuth) and then this error shows.
TypeError: Cannot read property 'substring' of undefined
at userPoolDefaults (C:\Users\dell\AppData\Roaming\npm\node_modules\#aws-amplify\cli\node_modules\amplify-category-auth\src\provider-utils\awscloudformation\assets\cognito-defaults.js:24:47)
at Object.identityAndUserPoolDefaults [as identityPoolAndUserPool] (C:\Users\dell\AppData\Roaming\npm\node_modules\#aws-amplify\cli\node_modules\amplify-category-auth\src\provider-utils\awscloudformation\assets\cognito-defaults.js:66:6)
at C:\Users\dell\AppData\Roaming\npm\node_modules\#aws-amplify\cli\node_modules\amplify-category-auth\src\provider-utils\awscloudformation\utils\auth-defaults-appliers.ts:46:54
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at C:\Users\dell\AppData\Roaming\npm\node_modules\#aws-amplify\cli\node_modules\amplify-category-auth\src\provider-utils\awscloudformation\handlers\resource-handlers.ts:39:31
at Object.executeAmplifyCommand (C:\Users\dell\AppData\Roaming\npm\node_modules\#aws-amplify\cli\node_modules\amplify-category-auth\src\index.js:379:3)
at executePluginModuleCommand (C:\Users\dell\AppData\Roaming\npm\node_modules\#aws-amplify\cli\src\execution-manager.ts:175:3)
at Object.executeCommand (C:\Users\dell\AppData\Roaming\npm\node_modules\#aws-amplify\cli\src\execution-manager.ts:28:5)
at Object.run (C:\Users\dell\AppData\Roaming\npm\node_modules\#aws-amplify\cli\src\index.ts:146:5)
There was an error adding the auth resource

In my case the error occurred because I moved the entire repo folder to another place, I corrected it by returning the folder to where it had it.
I discovered it because I tried to amplify pull to see if it would be corrected, and I got an error that it could not find team-provider-info.json, being that if it was there, until I notice that the path where I was looking for it was where it had before file

Related

Firebase Google Authentication works on localhost, but not on Netlify hosted site

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.

Can not remove AWS Amplify Auth

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 :)

How to login with auth0 in next js?

How to login in a next js app with auth0? I followed the quickstart from the auth0 website and I am getting this error on the login page.
Login
This is pages/api/[...auth0].js
import { handleAuth } from '#auth0/nextjs-auth0';
export default handleAuth();
I am getting this error on the login page.
and I am getting this in my terminal
OPError: expected 200 OK, got: 404 Not Found
at processResponse (/home/madhav/Documents/Web Development/freelancing/frontend-affilboost/node_modules/openid-client/lib/helpers/process_response.js:48:11)
at Function.discover (/home/madhav/Documents/Web Development/freelancing/frontend-affilboost/node_modules/openid-client/lib/issuer.js:252:22)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:93:5) {
error: 'expected 200 OK, got: 404 Not Found'
}
I am getting Failed to load resource, the server responded with code 500 in my browsers' console.
What am I doing wrong?
The issue you're likely experiencing here is the following:
In your .env.local file AUTH0_BASE_URL should be set to http://localhost:<port>
In you .env.local file AUTH0_ISSUER_BASE_URL should be set to your Auth0 domain: https://xxx.us.auth0.com
Make sure your callback URL inside of Auth0 is set to http://localhost:<port>/api/auth/callback
Replace <port> with whatever port you're using locally to serve the application.
Bumped into the same thing, I know it's unlikely but don't forget to create a folder /auth inside your /api folder. I got the same error until I figured this out.
Changing .env to .env.local was the fix for me.

Uncaught (in promise) Error: Request failed with status code 426 in React app newsapi call

I have a React app hosted on Github that makes a call out to the newsapi.org API. Locally the app is working fine, but in gh-pages URL in some browsers i.e. chrome I am getting the following error which is not allowing the newsapi information to load:
Unchecked runtime.lastError: The message port closed before a response was received.
GET https://newsapi.org/v2/top-headlines?country=us&apiKey=7a4e481d736140efae783b1bfd607fbe 426
createError.js:16
Uncaught (in promise) Error: Request failed with status code 426
at e.exports (createError.js:16)
at e.exports (settle.js:17)
at XMLHttpRequest.p.onreadystatechange (xhr.js:61)
The repo is at https://github.com/MarkMGill/Newscast, and gh-pages URL is https://markmgill.github.io/Newscast/. I've tried googling 426, but there isn't a lot of useful info I can find. Appreciate anyone who may know how to resolve this.
Just researched some more and found new information saying newsapi.org has changed its free service to only allow API calls locally. This explains why my app in gh-pages is no longer loading API info.

Autodesk Forge API tutorial Get a 3-Legged Token 404 error

I have a similar issue to this post.
I am following the 3-legged tutorial on the Forge API website here, and I matched the callback URI and URL, tried swapping the data:read for viewables:read, and tried switching to https:// and not http:// but I'm still getting an error when I run the app and login via the link in the tutorial which I adjusted with my information.
The error I get is:
Not Found.
The requested URL /parking/oauth/callback was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Do you know what could be wrong?

Resources