Search code examples
djangovue.jsdjango-allauth

Setup django social auth with vuejs frontend

I just started a project with a frontend developer. We are trying to add social authentication (Discord), without success.

I want to use django as a REST API for the backend, I installed django-allauth which seems to work when I use a django template to connect using Discord:

{% load socialaccount %}
{% providers_media_js %}
<html>
    <head>
        <title>Discord Registration</title>
    </head>
    <body>
{{user}}
<a href="{% provider_login_url "discord" method="oauth2" %}">Discord Connect</a>
</html>

But I have no idea how to share this connection with the frontend (made with vuejs). I've never worked on a project where backend and frontend are not in the same application... What to do on the frontend and what to do on the backend? And the main question, how? I've been working on it for two days and I'm still completely lost.

Solution

  • There are 2 ways you can make this work depending upon how you are planning to deploy to production.

    Method 1:
    Frontend developer can run npm run build command which will generate a folder called dist. You have to serve this folder from your django application. Do the following in your Django application:

  • In settings.py file, add VUE_FOLDER = 'PATH_TO_DIST_FOLDER/dist'

    TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [os.path.join(BASE_DIR, VUE_FOLDER)],
}



  • In urls.py file, add path('', TemplateView.as_view(template_name='index.html'), name="home"

    The above line will serve the Vue index.html file as django home page.

    This way your production will have only one port which will serve only one application which has both UI and django app. All API which are present in urls.py file can be accessed by UI. No need to worry about CORS.

    Method 2:
    UI can be a separate app hosted in one port and your django application can be a separate app hosted in another port. In that case your django application should support CORS as all API calls from UI will be considered as cross origin calls. UI should include the complete url path http://django-server:port/api_name/ to access the API.

    In both the case, you no need to use django template and UI can be an independent app. Routing will be taken care by vue-router. Django app will act as server and will handle only APIs. Hope this helps.