Auth-module: Social Login

[roosht3]

Hello,
one of my applications have an authentication flow of

JWT
Social Authentication

For now everything works but not as intended. We need to exchange facebook authentication token for a local JWT token. Can that be done ?

_{This question is available on Nuxt.js community (#c143)}

[nikkanetiya]

I think currently it is not possible. https://github.com/nuxt-community/auth-module/pull/192 after this merge and in next version we might get it, which allows us to fetch users from the server even for social authentication.

[syffs]

@nikkanetiya @roosh-t3 indeed that's what this PR was about

[roosht3]

I've come up with a solution. which is not so good. but it works.

export default async function ({ app }) {
    if (!app.$auth.loggedIn) {
        return
    }

    const auth = app.$auth;

    const authStrategy = auth.strategy.name;
    if(authStrategy === 'facebook' || authStrategy === 'google'){
        const token = auth.getToken(authStrategy).substr(7);
        const authStrategyConverted = authStrategy === 'facebook' ? 'fb' : 'google';
        const url = `/user/signup/${authStrategyConverted}?token=${token}`;

        try {
            const {data} = await app.$axios.$post(url, null);
            auth.setToken('local', "Bearer "+ data.access_token);
            setTimeout( async () => {
                auth.setStrategy('local');
                setTimeout( async () => {
                    await auth.fetchUser();
                })
            });
        } catch (e) {
            console.log(e);
        }
    }
}

[johanvanwambeke]

@roos

I've come up with a solution. which is not so good. but it works.

export default async function ({ app }) {
    if (!app.$auth.loggedIn) {
        return
    }

    const auth = app.$auth;

    const authStrategy = auth.strategy.name;
    if(authStrategy === 'facebook' || authStrategy === 'google'){
        const token = auth.getToken(authStrategy).substr(7);
        const authStrategyConverted = authStrategy === 'facebook' ? 'fb' : 'google';
        const url = `/user/signup/${authStrategyConverted}?token=${token}`;

        try {
            const {data} = await app.$axios.$post(url, null);
            auth.setToken('local', "Bearer "+ data.access_token);
            setTimeout( async () => {
                auth.setStrategy('local');
                setTimeout( async () => {
                    await auth.fetchUser();
                })
            });
        } catch (e) {
            console.log(e);
        }
    }
}

How do you implement it?
Is it a plugin? Where do i place this?

[roosht3]

@johanvanwambeke It is goes into the auth.js. Read this https://auth.nuxtjs.org/recipes/extend.html

[johanvanwambeke]

@johanvanwambeke It is goes into the auth.js. Read this https://auth.nuxtjs.org/recipes/extend.html

Thank you so much, the logic works.
Have you managed to get this published tho?
I did a npm run build with netlify and it is not working.
I feel like I can't get spa with nuxt/auth to actually log in my user with google.

It returns the login page with the whole token and everything but it does not log in.
Do you also have a workaround/patch for this maybe?

[fejiroofficial]

Is there a solution for this yet? It only works when my developer console is open. Can't seem to find any work around else where.

[stivenramireza]

It works!

[LeoMartinDev]

This solution is not working using latest @next version, $auth.strategy.token.get() is always empty

[nhanco]

any solution same same with @johanvanwambeke did ? now that code not work anymore