Social authentication with Inertia

[kbarbier]

I'm new to Adonis and Inertia. Can you guide me on integrating social authentication (like Google, Facebook, etc.) into my Adonis application using Inertia?
Thank you

[RomainLanz]

Hey @kbarbier! 👋🏻

What have you tried so far?

It should work similarly to a standard API or SSR setup. Your app will make a request to AdonisJS, which then redirects to the OAuth provider. After authentication, the OAuth provider sends the user back to your callback route.

📚 https://docs.adonisjs.com/guides/authentication/social-authentication

[kbarbier]

client

const GoogleLogin = () => {
  async function onSubmit(e) {
    e.preventDefault()
    const response = await fetch('http://localhost:3333/google/redirect')
    const data = await response.json()
    if (data?.url) {
      window.location.href = data.url
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <Button variant="outline" type="submit">
        Google
      </Button>
    </form>
  )
}

export default GoogleLogin

backend

  async redirectToGoogle({ ally }:HttpContext) {
    const url=await ally.use('google').redirectUrl()

    return{url}
  }

This is my current method, not sure if it is the best approach

[LaFibreDuDev]

Hello, I had same error with ally and github.
Here is log error in console code inspector (it seems that ally use axios) :

Access to XMLHttpRequest at 'https://github.com/login/oauth/authorize?redirect_uri=&client_id=XXX&scope=user' (redirected from 'http://localhost:3333/github/redirect') from origin 'http://localhost:3333' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Here is my configuration of cors in adonis :

const corsConfig = defineConfig({
  enabled: true,
  origin: '*',
  methods: ['GET', 'HEAD', 'POST', 'PUT', 'DELETE'],
  headers: true,
  exposeHeaders: [],
  credentials: true,
  maxAge: 90,
})

export default corsConfig