Nuxt Auth using Facebook

Question

For the time being, I'm attempting to integrate Nuxt Auth Facebook. I've already set up on my local machine, but I'm having trouble. When I click login with Facebook and it takes me to Facebook, I click continue with my Facebook, and Facebook returns me to my website with an access token.

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

the flow I want to do something like this: after clicking on Facebook, I want to get the user id and email address from Facebook and pass it to the API, which will check the database and save it and return the token if it doesn't exist. If the data is already available, return the token.

How do I integrate it? Is there a website or a tutorial I can refer to?

Answer 1

I got same problem that's how I solve this, first time create provider.js file inside your plugins folder

//providers.js
export default async function ({ app }) {
    if (!app.$auth.loggedIn) {
        return
    } else {
        const auth = app.$auth;
        const authStrategy = auth.strategy.name;
        if (authStrategy === 'facebook') {
            console.log('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') {
            console.log('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);
            }
        }

    }
}

Your Auth config should look like this:

//inside nuxt.config.js
  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:'redirect_url',
        clientId: 'client_id',
        scope: ['public_profile', 'email'],
      },

      google: {
        responseType: 'token id_token',
        codeChallengeMethod: '',
        clientId: 'clientid',
        redirectUri: 'redirect_url',
        scope: ['email'],
     },

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

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