Auth0 Home Blog Docs

Django: Redirect to Auth0 sign up tab instead of login

Hi There,

I have a Django GraphQL App which makes use of Djangos Auth System via redirects.

Frontend Vue -> GraphQL -> Django

For login I call the endpoint myapp.com/auth/login this url is handled by my django app. I redirects then directly to auth0. I then can register or login. (This is working :slight_smile: )

I configured the django app like it is described here:

my views looks like this

from django.contrib.auth import logout as log_out
from django.conf import settings
from django.http import HttpResponseRedirect
from urllib.parse import urlencode
from django.shortcuts import redirect
from django.contrib.auth.decorators import login_required


def index(request):
    user = request.user
    if user.is_authenticated:
        return redirect(dashboard)
    else:
        return redirect(auth_0_login)



def auth_0_login(request):
    return redirect(settings.AUTH_0_LOGIN_URL)


@login_required
def dashboard(request):
    return redirect(settings.DASHBOARD_URL)


def logout(request):
    log_out(request)
    return_to = urlencode({'returnTo': request.build_absolute_uri(settings.HOST_URL)})
    logout_url = 'https://%s/v2/logout?client_id=%s&%s' % \
                 (settings.SOCIAL_AUTH_AUTH0_DOMAIN, settings.SOCIAL_AUTH_AUTH0_KEY, return_to)
    return HttpResponseRedirect(logout_url)

Now I would like to add an endpoint for registering so that directly the register / sign up tab is shown directly instead of Log in:

So my views should be extended like this:

def register(request):
        # DO SOMETHING HERE

I have no clue what to add here.

Could please someone help me here?

1 Like

I’m not familiar with Django but just tried @Carlos_Mostek 's suggestion here and it works

Here is what you need to do

  1. Add a namespace’d param to your /authorize call (the url that register route will redirect to) to indicate the login page initialScreen configuration option for auth0 Lock used in Universal Login page. for example /authorize?...all_other_params_&mycompany_login_mode=signup
  2. Go to Universal Login section of Auth0 Dashboard and turn on Customize Login Page toggle
  3. Retrieve the namespace’d param be fore you create instance of Auth0Lock var loginMode = config.extraParams.mycompany_login_mode;
  4. set appropriate initialScreen option based on the namespaced param value like initialScreen: loginMode && loginMode === 'signup' ? 'signUp' : undefined,

Hope that helps.

image

Thanks for your answer

Where can I actually find the exact company name?

Is it part of the profile?

this namespace’d parameter name can be anything. It can be even weseba. It only reason it is recommended to namespace it so it doesn’t clash with any other param names. One of the way to namespace is to use reverse domain name of your own company as your company domain name is unique. However feel free to use anything you want.

I have now hardcoded the call into my application and into universial login section of the auth0 dashboard.

If i send the request to
…/login?

The query parameters are present:

But the universial login does not look like that it extract this parameter:

loginMode will be undefined, because extraParams does not have this value

It looks like that some other guys also had this problem, that the extraParams are not passed through:

But there is no solution yet.

You need to send the custom parameter to /authorize url, not /login

Thanks a lot for your help.

In the end it was really simple to implement.

I can now call http://mycompanydomain.com/auth/signup and the signup tab will be shown.

Here is my code:

auth0login/urls.py

from django.urls import path, include
from . import views


urlpatterns = [
    ...
    path('signup', views.auth_0_sign_up),
]

auth0login/views.py

def auth_0_sign_up(request):
    return redirect(f'{settings.AUTH_0_LOGIN_URL}?{settings.AUTH_0_SIGN_UP_PARAMETER}')

settings.py

AUTH_EXTRA_ARGUMENTS = {'mycompany_login_mode': ''}
AUTH_0_SIGN_UP_PARAMETER = 'mycompany_login_mode=signup'

Auth 0 Settings

On the Auth0 Backend | Universal Login | Login Tab | Enable Customize Login Page

var loginMode = config.extraParams.mycompany_login_mode;    

auth: {
   ...
   initialScreen: loginMode && loginMode === 'signup' ? 'signUp' : undefined,
   ...

}


// Hiding the login / sign up tab if it is sign up
if(loginMode && loginMode === 'signup') {
    var css = '.auth0-lock.auth0-lock .auth0-lock-tabs {' +
                  'display: none;}' 
    var style = document.createElement('style');
    style.appendChild(document.createTextNode(css));
    document.body.appendChild(style);
  }
2 Likes

Glad yo have it working now and thanks for sharing the setup with the rest of community!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.