How to login via providers (Google, Github)? about strapi

[benjamincanac]

You can make a simple redirection to the strapi endpoint in your login method:

window.location = `${this.$config.strapiUrl}/connect/github`

In this example strapiUrl is injected through the publicRuntimeConfig in nuxt.config.js:

publicRuntimeConfig: {
	strapiURL: process.env.STRAPI_URL || 'http://localhost:1337'
},

Then, you have to create the redirect page, in this example we assume the url is /auth/github/callback (depends on your strapi config). Create a pages/auth/_provider/callback.vue page that will fetch the jwt and inject it in the strapi module:

<script>
export default {
  async fetch ({ route, redirect, $strapi }) {
    try {
      const { jwt } = await $strapi.$http.$get('/auth/github/callback', {
        searchParams: {
          access_token: route.query.access_token
        }
      })

      $strapi.setToken(jwt)

      await $strapi.fetchUser()

	  // Useful if you have a middleware that sets the `redirect` cookie when accessing a private page
      redirect($strapi.$cookies.get('redirect') || '/')
    } catch (e) {}
  }
}
</script>

[Tragio]

@benjamincanac would be awesome if this could be added to the documentation 😄

[colodenn]

Thanks!