How to allow popup permission of web browser in mobile

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;

Any help?
How to get away from this?
Thank you.

Hey @david.yang, I don’t think this is possible due to security concerns. I’ve provided a similar response on this other ticket.

1 Like

Thanks for sharing that @Ale !

1 Like