How to setup a splash/waiting screen during auth ?

[franck-grenier]

Hello,
I'm using @nuxtjs/auth-next: 5.0.0-1667386184.dfbbb54 to authenticate my users through OAuth2 with Laravel Passport.

The OAuth2 flow can sometimes be a bit long and users then have blank screens while waiting to finally land authenticated on the app.

So we are trying to display a "loading/waiting" message.

Our login page looks like that:

<template>
    <div class="text-center mt-8">
        <template v-if="showLoader">
            <p><strong>Authenticating...</strong></p>
            <br />
            <div class="spinner-border" />
        </template>
    </div>
</template>

<script>
export default {
    layout: 'empty',
    middleware: [
        'auth',
    ],
    data () {
        return {
            error: null,
            isLoading: false,
            showLoader: false,
        };
    },
    async mounted () {
        if (this.$route.query.code) {
            this.showLoader = true;
            return;
        }
        this.isLoading = true;
        try {
            const path = this.$auth.$storage.getUniversal('redirect') || '/';
            await this.$auth.loginWith('idp');
            this.$auth.$storage.setUniversal('redirect', null);
            await this.$router.push(path);
        } catch (e) {
            this.error = {title: 'error...', description: ''};
        }
        this.isLoading = false;
    },
    methods: {
    },
};
</script>

Without auth middleware, I can see my message "Authenticating..." and my spinner. But I never get redirected though await this.$router.push(path) instruction. So I guess redirecting after auth works another way.

Do you know how I can achieve that ? Does Nuxt Auth have some built-in stuff to show that kind of "waiting/loading" screen ?

Thanks