Is there a way to redirect to an External Origin URL | Headless Social Login

[alvarohc777]

Hi,

I have a question, I am making a post request with a form using django headless to http://localhost:8000/_allauth/browser/v1/auth/provider/redirect using google as provider. I was wondering if there is a way to override the callback url to an external url, for example, localhost:9000, where I host my Frontend SPA.

As seen in this image, when trying to use localhost:9000 on the callback_url parameter in the body of the post request, I get an error:

The issue is the external origin url, as it works fine with localhost:8000. However I would like it to redirect to a url on my frontend SPA on port 9000.

I read the source code for headless, and there are no methods on the adapter.py inside the headless module. I am not sure if there is a way to override this behaviour with a parameter of any other thing I've missed. If it's possible to do or not, I would greatly appreciate any help.

Thank you :)

[pennersr]

The callback URL must be a backend URL, it cannot be a frontend URL, as several providers use POST requests to the callback, and the frontend is not capable of handling that.

But this does not appear to be your issue. In your case, a redirect is happening from the provider to the callback URL. There, an error is detected, and the callback view wants to redirect to a frontend URL that can display this error. But, your HEADLESS_FRONTEND_URLS has no frontend URL configured for this, hence that ImproperlyConfigured error.

[alvarohc777]

Hi, pennersr.

I solved the issue by creating an endpoint that redirects to the FRONTEND.
This is the code:

from ninja import Router
from ninja.security import django_auth
from django.shortcuts import redirect
from django.conf import settings

router = Router(auth=django_auth)
FRONTEND_URL_BASE = settings.FRONTEND_URL


@router.get("redirect/", auth=None)
def login_redirect(request):
    if request.user.is_authenticated:
        print(f"{FRONTEND_URL_BASE}/logout")
        return redirect(f"{FRONTEND_URL_BASE}/logout")
    return redirect(f"{FRONTEND_URL_BASE}/login")

Thanks for the help :)

[jaimesalazarlahera]

I've actually needed to do the following to get it to work to some extent:

@router.get("account/provider/callback", auth=None)
def login_redirect(request):
    if request.user.is_authenticated:
        if request.path == "/api/account/provider/callback":
            redirect_to: str = "dashboard"
        else:
            redirect_to = request.path
    else:
        redirect_to = "account/login"
    return redirect(f"{settings.FRONTEND_URL}/{redirect_to}")

Without this, after I basically finish the /account/signup, my backend would redirect me to localhost:8000/account/provider/callback, meaning it would be pointing to some route that doesn't exist on the backend (404). So in <ProviderList /> (in both Login.js and Signup.js) I had to modify callback_url to point to f"{BACKEND_URL}/account/provider/callback", which would finally properly redirect me back to my frontend (/dashboard).

Idk if I'm doing something wrong or if my setup (1 docker-compose for the backend, another docker-compose for the front) differs so much from the react-spa example that this was necessary? Either way, thanks @alvarohc777 @pennersr for the react-spa example and tip