Develop Reference

Error trying to login on Azure: BrowserAuthError

I'm getting an error trying to login with Azure + TypeScript/JavaScript. The problem is when the user logs in and needs to get redirected to another page. When the response from login is OK, the page remains blank and I need to refresh manually.
This is my config file:
import { Configuration, LogLevel } from "#azure/msal-browser"
export const msalConfig:Configuration = {
auth: {
clientId: process.env.AZURE_CLIENT_LOGIN || "",
authority: "https://login.microsoftonline.com/" + process.env.AZURE_AUTH_LOGIN,
redirectUri: "/admin/dashboard"
},
cache: {
cacheLocation: "sessionStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
},
system: {
loggerOptions: {
loggerCallback: (level: any, message: any, containsPii: any) => {
if (containsPii) {
return;
}
switch (level) {
case LogLevel.Error:
console.error(message);
return;
case LogLevel.Info:
console.info(message);
return;
case LogLevel.Verbose:
console.debug(message);
return;
case LogLevel.Warning:
console.warn(message);
return;
}
}
}
}
}
export const loginRequest = {
scopes: ["User.Read"]
};
export const graphConfig = {
graphMeEndpoint: "Enter_the_Graph_Endpoint_Herev1.0/me"
};
And this is my index page:
import React, { useEffect } from 'react';
import type { NextPage } from "next";
import { useRouter } from 'next/router';
import { useMsal } from '#azure/msal-react';
import { useIsAuthenticated } from '#azure/msal-react';
import { loginRequest } from '../services/azureLoginApi';
const Home: NextPage = () => {
const router = useRouter()
const { instance } = useMsal()
const isAuthenticated = useIsAuthenticated()
const redirectToAzureLogin = () => {
instance.loginRedirect(loginRequest).catch((e:any) => {
console.log(e);
});
}
const redirectToDashboard = () => {
router.push('/admin/dashboard')
}
useEffect(()=>{
if(isAuthenticated)
redirectToDashboard()
else
redirectToAzureLogin()
},[])
return (
<div className="index">
</div>
);
};
export default Home;
On console, I get this message:
BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API. For more visit: aka.ms/msaljs/browser-errors.
at BrowserAuthError.AuthError [as constructor] (AuthError.js?d98c:27:1)
at new BrowserAuthError (BrowserAuthError.js?be02:197:1)
at Function.BrowserAuthError.createInteractionInProgressError (BrowserAuthError.js?be02:264:1)
at BrowserCacheManager.setInteractionInProgress (BrowserCacheManager.js?6011:886:23)
at PublicClientApplication.ClientApplication.preflightInteractiveRequest (ClientApplication.js?9c57:777:1)
at PublicClientApplication.ClientApplication.preflightBrowserEnvironmentCheck (ClientApplication.js?9c57:762:1)
at PublicClientApplication.eval (ClientApplication.js?9c57:220:1)
at step (_tslib.js?89f4:75:1)
at Object.eval [as next] (_tslib.js?89f4:56:46)
at eval (_tslib.js?89f4:49:1)
at new Promise (<anonymous>)
at __awaiter (_tslib.js?89f4:45:1)
at PublicClientApplication.ClientApplication.acquireTokenRedirect (ClientApplication.js?9c57:214:25)
at PublicClientApplication.eval (PublicClientApplication.js?1b7b:63:1)
at step (_tslib.js?89f4:75:1)
at Object.eval [as next] (_tslib.js?89f4:56:46)
at eval (_tslib.js?89f4:49:1)
at new Promise (<anonymous>)
at __awaiter (_tslib.js?89f4:45:1)
at PublicClientApplication.loginRedirect (PublicClientApplication.js?1b7b:58:25)
at redirectToAzureLogin (index.tsx?db76:18:14)
at eval (index.tsx?db76:31:7)
at invokePassiveEffectCreate (react-dom.development.js?61bb:23487:1)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:3994:1)
at invokeGuardedCallback (react-dom.development.js?61bb:4056:1)
at flushPassiveEffectsImpl (react-dom.development.js?61bb:23574:1)
at unstable_runWithPriority (scheduler.development.js?3069:468:1)
at runWithPriority$1 (react-dom.development.js?61bb:11276:1)
at flushPassiveEffects (react-dom.development.js?61bb:23447:1)
at eval (react-dom.development.js?61bb:23324:1)
at workLoop (scheduler.development.js?3069:417:1)
at flushWork (scheduler.development.js?3069:390:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?3069:157:1)
The page remains blank until I give a manual refresh on it. With the manual refresh, the redirect works, but without it the page remains freezed.
I've tried some solutions on StackOverflow and other blogs but didn't work out.
Thank you all for any help you may give!

change instance.loginRirect to instance.loignPopup, that would solve that

Problem solved: the point was the useEffect without dependencies. Adding it solved the problem, now the redirect works without needing to manually update the page.

Getting error while creating code for my netflix-clone

Row.js component code where i am calling the api key
Row.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
export default function Row({title, fetchUrl})
{
const [movies, setMovies] = useState([])
// A snippet of code that runs based on a specific condition
useEffect(() => {
//if [], run once when the row load
async function fetchData() {
const request = await axios.get(fetchUrl);
console.log(request);
}
fetchData();
}, []);
return (
<div>
<h2>{title}</h2>
</div>
)
}
axios.js
import axios from "axios";
// base url to make requests to the movie database
const instance = axios.create({
baseURL: "https://api.themoviedb.org/3",
});
export default instance;
Error in the console log is below one, I got the API key from TMBD Api and it was working fine with postman but here in react it is not working properly.
Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}code: "ERR_BAD_REQUEST"config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}message: "Request failed with status code 404"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: '<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta char…not GET /trending/all/week</pre>\n</body>\n</html>\n', status: 404, statusText: 'Not Found', headers: {…}, config: {…}, …}[[Prototype]]: Error
fetchData # Row.js:13
await in fetchData (async)
(anonymous) # Row.js:14
commitHookEffectListMount # react-dom.development.js:23150
invokePassiveEffectMountInDEV # react-dom.development.js:25154
invokeEffectsInDev # react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV # react-dom.development.js:27330
flushPassiveEffectsImpl # react-dom.development.js:27056
flushPassiveEffects # react-dom.development.js:26984
(anonymous) # react-dom.development.js:26769
workLoop # scheduler.development.js:266
flushWork # scheduler.development.js:239
performWorkUntilDeadline # scheduler.development.js:533

you created an axios instance but you did not use it
import instance from "the path to your axios.js file" //like "./axios"
and in the fetchData
async function fetchData() {
const request = await instance.get(fetchUrl);
console.log(request);
}

Amplify AppSync Subscription Uncaught (in promise)

I am trying to use AWS amplify GraphQL subscription like below,
import Amplify,{ API, Storage, graphqlOperation } from "aws-amplify";
import awsmobile from "../../aws-exports";
Amplify.configure(awsmobile);
...
const notiSubscription = API.graphql(graphqlOperation(onCreateNotification)).subscribe({
next: (todoData) => {
console.log(todoData);
},
});
...
onCreateNotification Graphql is,
subscription OnCreateNotification {
onCreateNotification {
id
}}
Below is the error I get,
AWSAppSyncProvider.ts:204 Uncaught (in promise) undefined
rejected # AWSAppSyncProvider.ts:204
Promise.then (async)
step # AWSAppSyncProvider.ts:204
(anonymous) # AWSAppSyncProvider.ts:204
push../node_modules/#aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js.__awaiter # AWSAppSyncProvider.ts:204
AWSAppSyncRealTimeProvider._startSubscriptionWithAWSAppSyncRealTime # AWSAppSyncRealTimeProvider.ts:227
(anonymous) # AWSAppSyncRealTimeProvider.ts:185
Subscription # Observable.js:197
subscribe # Observable.js:279
(anonymous) # PubSub.ts:171
...
Please help me out in this, also my config is
"aws_project_region": "us-east-1",
"aws_appsync_graphqlEndpoint": "https://xxx.appsync-api.us-east-1.amazonaws.com/graphql",
"aws_appsync_region": "us-east-1",
"aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
"aws_appsync_apiKey": "xxxx",

You need to intialize the subscription in a useEffect() hook and then unsubscribe from the subscription.
useEffect(() => {
const subscription = API.graphql(graphqlOperation(onCreateNotification))
.subscribe({
next: todoData => {
console.log(todoData);
}
})
return () => subscription.unsubscribe()
}, [])

Error when trying to upload images to Firebase storage

I am trying to create an app which allow the user to upload an image and display it in the page with React and Firebase.
this is the part of the code that responsible for the issue:
the image variable is coming from from the state
const [image, setImage] = useState("");
const [caption, setCaption] = useState("");
const [progress, setProgress] = useState(0)
function handleChange (e){
if (e.target.files[0]){
setImage(e.target.files[0]);
}
}
function handleUpload(){
const uploadTask = storage.ref('images/${image.name}').put(image)
uploadTask.on(
"state_changed",
(snapshot) => {
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(progress);
},
(error) => {
console.log(error);
alert(error.message);
},
() => {
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then(url => {
db.collection("posts").add({
timestamp: db.FieldValue.serverTimestamp(),
caption : caption,
imgUrl: url,
userName: username
})
setProgress(0);
setCaption("");
setImage(null);
})
}
)
}
and this error get logged in the console :
Uncaught
FirebaseStorageError {code_: "storage/invalid-argument", message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.", serverResponse_: null, name_: "FirebaseError"}code_: "storage/invalid-argument"message_: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File."name_: "FirebaseError"serverResponse_: nullcode: (...)message: (...)name: (...)serverResponse: (...)__proto__: Object
rethrowCaughtError # react-dom.development.js:328
runEventsInBatch # react-dom.development.js:3336
runExtractedPluginEventsInBatch # react-dom.development.js:3537
handleTopLevel # react-dom.development.js:3581
batchedEventUpdates$1 # react-dom.development.js:21729
batchedEventUpdates # react-dom.development.js:798
dispatchEventForLegacyPluginEventSystem # react-dom.development.js:3591
attemptToDispatchEvent # react-dom.development.js:4311
dispatchEvent # react-dom.development.js:4232
unstable_runWithPriority # scheduler.development.js:659
runWithPriority$1 # react-dom.development.js:11077
discreteUpdates$1 # react-dom.development.js:21746
discreteUpdates # react-dom.development.js:811
dispatchDiscreteEvent # react-dom.development.js:4211
I have tried to change put(image) to put(blob) but it did not work

The line:
const uploadTask = storage.ref('images/${image.name}').put(image)
Has an error, it should be using the symbol ` (backquote/backtick) instead of using single quotes ':
const uploadTask = storage.ref(`images/${image.name}`).put(image)
otherwise you will create a reference to the literal string images/${image.name} instead of image/value_of_variable_image.jpg more about Template literals can be found here
You haven't still showed us what's the content of the image variable, I can see from the code that you're calling a setState inside a function that appears to be a callback, but I'm not seeing from where are you calling, you can do it from a input like this:
<input type="file" onChange={handleChange} />
If you're already using it like that, I recommend to add console.log(image) outside of a function in order debug what's the content of the variable before sending it to put(). Just as a reference the output from the console.log(image) should be an instance of the File javascript API

How can I make this function synchronous with Asyn/await

I'm trying to make this code to be synchronous but for some reason async/await doesn't work.. Im working in React-native with two differents modules. I want to see my geolocation in googleMaps but it gets me a error because the asynchronous stuff.
App is the root component, im importing getLocalitation function.
export default class App extends Component {
Appmetod = async () => {
const resp = await getLocalitation();
console.log('Appmetod: latitud: ' + resp.latitude);
Linking.openURL(`http://www.google.com/maps/place/-33.317597,-71.405500`);
}
render() {
return (
<View style={styles.container}>
<Button title="Click me" onPress={this.Appmetod } />
</View>
);
}
}
const getLocalitation = () =>{
console.log('DENTRO DE GetLocalitaion');
const geoOptions={
enableHighAccuracy: true,
timeOut: 10000
};
const coordenates = navigator.geolocation.getCurrentPosition( geoSucces,goFailure, geoOptions);
console.log('DESPUES DE COORDENATES');
return coordenates;
}
const geoSucces = (position) => {
console.log('DENTRO DE GEOSUCCEES');
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordenates={
latitude: latitude,
longitude: longitude
};
console.log('COORDENATES: ' + coordenates.latitude);
return coordenates;
}
const goFailure = (err) => {
console.log('Error en al geolocalizar: ' + err);
return null;
}
OUTPUT:
C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Utilities\infoLog.js:16 Running application "geolocation" with appParams: {"rootTag":161}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
C:\Users\jnunez\React-Native\Proyects\geolocation\src\getLocalitation.js:2 DENTRO DE GetLocalitaion
C:\Users\jnunez\React-Native\Proyects\geolocation\src\getLocalitation.js:10 DESPUES DE COORDENATES
C:\Users\jnunez\React-Native\Proyects\geolocation\src\getLocalitation.js:16 DENTRO DE GEOSUCCEES
C:\Users\jnunez\React-Native\Proyects\geolocation\src\getLocalitation.js:26 COORDENATES: -32.92098393
C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\YellowBox\YellowBox.js:67 Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'latitude' of undefined
TypeError: Cannot read property 'latitude' of undefined
at _callee$ (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:1895:58)
at tryCatch (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41538:19)
at Generator.invoke [as _invoke] (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41713:24)
at Generator.prototype.<computed> [as next] (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41581:23)
at tryCatch (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41538:19)
at invoke (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41614:22)
at blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:41624:15
at tryCallOne (blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:45254:14)
at blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:45355:17
at blob:http://localhost:8081/19d9ce97-42d2-4939-91b8-160b264c9c79:46233:21
console.warn # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\YellowBox\YellowBox.js:67
onUnhandled # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Promise.js:45
onUnhandled # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\promise\setimmediate\rejection-tracking.js:71
(anonymous) # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:256
_callTimer # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:152
callTimers # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\Core\Timers\JSTimers.js:414
__callFunction # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:366
(anonymous) # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106
__guard # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:314
callFunctionReturnFlushedQueue # C:\Users\jnunez\React-Native\Proyects\geolocation\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:105
(anonymous) # debuggerWorker.js:80

await / async do not stop code being asynchronous.
They are tools which let you write non-asynchronous style code by managing promises.
You can only await a promise. getLocalitation does not return a promise.
See How do I convert an existing callback API to promises? to get a promise for navigator.geolocation.getCurrentPosition.

It is because you're using await keyword with a function that is not async
const resp = await getLocalitation();
You can either put an async before the () when defining getLocation or you can just remove await from const resp = await getLocalitation(), since you don't need to use await with something that does not return a promise.
In case you want to make getLocalitation async you do it like this
const getLocalitation = async () =>{
console.log('DENTRO DE GetLocalitaion');
const geoOptions={
enableHighAccuracy: true,
timeOut: 10000
};
const coordenates = navigator.geolocation.getCurrentPosition( geoSucces,goFailure, geoOptions);
console.log('DESPUES DE COORDENATES');
return coordenates;
}