I have created Nuxt.js application, I decided to build in Nuxt/auth module, everything works fine in web browsers, but somethimes when user navigates with mobile browser my application is crushed, simply it don't respond nothing, also there is no api calls, but after one refresh everything works fine, I can not guess what's happening, I could not find anything in the resources available on the Internet.

const axios = require('axios')
export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'app',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      // { src: "//code-eu1.jivosite.com/widget/UoBOrMfSmm", async: true },
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [ '~/assets/css/transition.css', '~/assets/css/errors.css' ],
  pageTransition: "fade",
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: "~/plugins/star-rating", ssr: false },
    { src: "~/plugins/mask", ssr: false },
    { src: "~/plugins/rangeSlider", ssr: false },
    { src: "~/plugins/vueSelect", ssr: false },
    { src: "~/plugins/vuelidate", ssr: false },
  ],


  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    [ '@nuxtjs/google-analytics', {
      id: 'xxx'
    } ]
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/bootstrap
    'bootstrap-vue/nuxt',
    '@nuxtjs/axios',
    '@nuxtjs/toast',
    '@nuxtjs/auth-next',
    [ 'nuxt-lazy-load', {
      defaultImage: '/spin2.gif'
    } ],
    [ 'nuxt-facebook-pixel-module', {
      /* module options */
      track: 'PageView',
      pixelId: '',
      autoPageView: true,
      disabled: false
    } ],
    'nuxt-moment',
    '@nuxtjs/robots',
    '@nuxtjs/sitemap'
  ],

  moment: {
    locales: ['ru', 'en']
  },


  toast: {
    position: 'top-center',
},

  robots: [
    {
      UserAgent: '*',
      Disallow: ['/user', '/admin'],
    },
  ],

  axios: {
    baseURL: 'https://api.test.com/', // Used as fallback if no runtime config is provided
  },

  sitemap:{
     exclude:[
       '/user',
       '/admin',
       '/admin/*',
       '/user/*',
     ],
     defaults: {
      changefreq: 'daily',
      priority: 1,
      lastmod: new Date()
    },
     routes: async () => {
      const { data } = await axios.get('https://api.test.com/api/cars/all')
      return data.map((product) => `https://test.com/product/${product.id}/${product.name}`)
    }
  },

  loading: {
    color: '#F48245',
    height: '4px'
  },

  target: 'server',

  /* auth */
  auth: {
    plugins:[
      { src: "~/plugins/providers", ssr:false},
    ],
    redirect: {
      login: '/',
      logout: '/',
      home: '/',
      callback: '/callback'
    },
    strategies: {
      local: {
        token: {
          property: 'user.token',
        },
        user: {
          property: false
        },
        endpoints: {
          login: { url: 'api/login', method: 'post' },
          logout: { url: 'api/logout', method: 'post' },
          user: { url: 'api/user', method: 'get' }
        },
      },

    facebook: {
        endpoints: {
          userInfo: 'https://graph.facebook.com/v6.0/me?fields=id,name,picture{url}',
        },
        redirectUri:'xxx',
        clientId: '184551510189971', 
        scope: ['public_profile', 'email'],
      },

      google: {
        responseType: 'token id_token',
        codeChallengeMethod: '',
        clientId: 'xxx',
        redirectUri: 'https://test.com/callback',
        scope: ['email'],
     },

    },
    cookie: {
      prefix: 'auth.',
    },
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
};

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

This is my plugins directory file, where i am handling client oauth process.

export default async function ({ app }) {
    console.log('auth executed')
    if (!app.$auth.loggedIn) {
        return
    } else {
        console.log('auth executed inside loop')
        const auth = app.$auth;
        const authStrategy = auth.strategy.name;
        if (authStrategy === 'facebook') {
            let data2 = {
                fb_token: auth.user.id,
                first_name: auth.user.name
            }
            try {
                const response = await app.$axios.$post("/api/oauth", data2);
                await auth.setStrategy('local');
                await auth.strategy.token.set("Bearer "   response.user.token);
                await auth.fetchUser();

            } catch (e) {
                console.log(e);
            }
        } else if (authStrategy === 'google') {
            let dataGoogle = {
                google_token: auth.user.sub,
                first_name: auth.user.given_name,
                last_name:auth.user.family_name
            }
            try {
                const response = await app.$axios.$post("/api/oauth", dataGoogle);
                await auth.setStrategy('local');
                await auth.strategy.token.set("Bearer "   response.user.token);
                await auth.fetchUser();

            } catch (e) {
                console.log(e);
            }
        }

    }
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

For any issues related to DOM hydration, you can check my answer here: https://stackoverflow.com/a/67978474/8816585

It does have several possible cases (dynamic content with a difference between client side and server side rendered template, some random functions, purely wrong HTML structure etc...) and also a good blog article from Alex!