I am using Auth0 loginwithpopup in my React app.
Auth0 works well in all desktops, but when I try to login it says “Could not open popup” using mobile web browser.
How can I avoid this and allow the permission programmatically?
import React, {
createContext,
useEffect,
useReducer
} from 'react';
import { Auth0Client } from '@auth0/auth0-spa-js';
import SplashScreen from 'src/components/SplashScreen';
import { auth0Config } from 'src/config';
import axios from 'axios';
let auth0Client = null;
const initialAuthState = {
isAuthenticated: false,
isInitialised: false,
user: null,
info: null
};
const AuthContext = createContext({
...initialAuthState,
method: 'Auth0',
loginWithPopup: () => Promise.resolve(),
logout: () => { }
});
export const AuthProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialAuthState);
const loginWithPopup = async (options) => {
await auth0Client.loginWithPopup(options);
const isAuthenticated = await auth0Client.isAuthenticated();
if (isAuthenticated) {
const user = await auth0Client.getUser();
const claims = await auth0Client.getIdTokenClaims();
dispatch({
type: 'LOGIN',
payload: {
user: {
id: user.sub,
avatar: user.picture,
email: user.email,
name: user.name,
tier: 'Premium'
},
}
});
}
};
...
useEffect(() => {
const initialise = async () => {
try {
auth0Client = new Auth0Client({
redirect_uri: `${window.location.origin}/verification`,
cacheLocation: 'localstorage',
...auth0Config
});
...
export default AuthContext;