> ## Documentation Index
> Fetch the complete documentation index at: https://auth0-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Ajouter une fonctionnalité de connexion à votre application Django
> Ce guide explique comment intégrer Auth0 à une application Python Django, à l’aide de la trousse SDK Authlib.
export const AuthCodeGroup = ({children, dropdown}) => {
const [processedChildren, setProcessedChildren] = useState(children);
useEffect(() => {
let unsubscribe = null;
function init() {
unsubscribe = window.autorun(() => {
const processChildren = node => {
if (typeof node === "string") {
let processedNode = node;
for (const [key, value] of window.rootStore.variableStore.values.entries()) {
const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
}
return processedNode;
} else if (Array.isArray(node)) {
return node.map(processChildren);
} else if (node && node.props && node.props.children) {
return {
...node,
props: {
...node.props,
children: processChildren(node.props.children)
}
};
}
return node;
};
setProcessedChildren(processChildren(children));
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, [children]);
return {processedChildren} ;
};
export const QuickstartButtons = ({githubLink, lang = "en"}) => {
const translations = {
en: {
viewOnGithub: "View On GitHub",
loginAndDownload: "Download Sample"
},
"fr-ca": {
viewOnGithub: "Afficher sur GitHub",
loginAndDownload: "Télécharger un exemple"
},
"ja-jp": {
viewOnGithub: "Githubで表示",
loginAndDownload: "サンプルをダウンロード"
}
};
const text = translations[lang] || translations.en;
const parseGithubUrl = url => {
try {
const urlObj = new URL(url);
const pathParts = urlObj.pathname.split("/").filter(Boolean);
if (pathParts.length >= 4 && pathParts[2] === "tree") {
const repoName = pathParts[1];
const branch = pathParts[3];
const path = pathParts.slice(4).join("/") || undefined;
return {
repo: repoName,
branch,
path
};
}
console.warn("Could not parse GitHub URL:", url);
return null;
} catch (error) {
console.error("Error parsing GitHub URL:", error);
return null;
}
};
const handleDownload = async () => {
const params = parseGithubUrl(githubLink);
if (!params) {
console.error("Invalid GitHub URL format");
return;
}
try {
await window.Auth0DocsUI?.getSample(params);
} catch (error) {
console.error("Failed to download sample:", error);
}
};
return ;
};
export const LoggedInForm = ({sampleApp}) => {
const LS_APPS_KEY = "auth_demo_apps";
const LS_APP_CFG_KEY = "auth_demo_app_cfg";
const CHANNEL = "auth_flows_sync_v1";
const mkChannel = () => new BroadcastChannel(CHANNEL);
function uid() {
return Math.random().toString(36).slice(2) + Date.now().toString(36);
}
function loadApps() {
const raw = localStorage.getItem(LS_APPS_KEY);
if (raw) return JSON.parse(raw);
const seeded = [{
id: "{yourClientId}",
name: "Default App"
}];
localStorage.setItem(LS_APPS_KEY, JSON.stringify(seeded));
return seeded;
}
function saveApps(apps) {
localStorage.setItem(LS_APPS_KEY, JSON.stringify(apps));
}
function loadCfg() {
const raw = localStorage.getItem(LS_APP_CFG_KEY);
return raw ? JSON.parse(raw) : {};
}
function saveCfg(cfg) {
localStorage.setItem(LS_APP_CFG_KEY, JSON.stringify(cfg));
}
const RightChevron = ({className = "w-5 h-5", ...props}) =>
;
const LightningIcon = () =>
;
const LayersIcon = () =>
;
const GithubIcon = () =>
;
function IconTile({children}) {
return
{children}
;
}
function Card({className = "", children}) {
return {children}
;
}
function Button({variant = "primary", type = "button", onClick, children}) {
const base = "inline-flex items-center justify-center gap-2 h-10 px-4 rounded-xl font-medium transition";
let styles = "";
if (variant === "primary") {
styles = "mint-bg-indigo-600 text-white hover:mint-bg-indigo-700";
} else if (variant === "outline") {
styles = "border border-zinc-300 dark:border-zinc-700 mint-bg-transparent hover:mint-bg-zinc-50 dark:hover:mint-bg-zinc-800";
} else if (variant === "ghost") {
styles = "hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800";
}
return
{children}
;
}
function Input({id, label, value, onChange, placeholder, name}) {
return
{label}
;
}
function Select({label, value, onChange, options}) {
return
{label}
onChange(e.target.value)}>
{options.map(o =>
{o.name}
)}
;
}
function Toast({open, onClose, children}) {
useEffect(() => {
if (!open) return;
const t = setTimeout(onClose, 2200);
return () => clearTimeout(t);
}, [open, onClose]);
return ;
}
function Flows() {
const [route, setRoute] = useState("menu");
const [apps, setApps] = useState(loadApps());
const [cfg, setCfg] = useState(loadCfg());
const [selected, setSelected] = useState(apps[0]?.id || "");
const [toast, setToast] = useState(false);
const [bc] = useState(() => mkChannel());
useEffect(() => {
if (!apps.find(a => a.id === selected)) {
setSelected(apps[0]?.id || "");
}
}, [apps, selected]);
useEffect(() => {
const onMsg = e => {
const {type, payload} = e.data || ({});
switch (type) {
case "NAV":
setRoute(payload.route);
break;
case "SELECT":
setSelected(payload.appId);
break;
case "APPS_UPDATED":
setApps(loadApps());
break;
case "CFG_UPDATED":
setCfg(loadCfg());
setToast(true);
break;
default:
break;
}
};
bc.addEventListener("message", onMsg);
return () => bc.removeEventListener("message", onMsg);
}, [bc]);
const nav = nextRoute => {
setRoute(nextRoute);
bc.postMessage({
type: "NAV",
payload: {
route: nextRoute
}
});
};
const selectApp = appId => {
setSelected(appId);
bc.postMessage({
type: "SELECT",
payload: {
appId
}
});
};
const onCreate = name => {
const id = uid();
const next = [...apps, {
id,
name: name || "Untitled"
}];
setApps(next);
saveApps(next);
bc.postMessage({
type: "APPS_UPDATED"
});
selectApp(id);
nav("integrate");
};
const onSaveCfg = (appId, data) => {
const next = {
...cfg,
[appId]: data
};
setCfg(next);
saveCfg(next);
setToast(true);
bc.postMessage({
type: "CFG_UPDATED"
});
};
return
{route === "menu" &&
nav("create")} onIntegrate={() => nav("integrate")} />}
{route === "create" && nav("menu")} onSave={onCreate} />}
{route === "integrate" && onSaveCfg(selected, data)} onCancel={() => nav("menu")} />}
setToast(false)}>
Successfully saved your changes.
;
}
function Menu({onCreate, onIntegrate}) {
return ;
}
function CreateForm({onSave, onCancel}) {
const [name, setName] = useState("");
return ;
}
function IntegrateForm({apps, selected, onSelect, saved, onSave, onCancel}) {
const [callbacks, setCallbacks] = useState(saved?.callbacks ?? "");
const [logouts, setLogouts] = useState(saved?.logouts ?? "");
const [origins, setOrigins] = useState(saved?.origins ?? "");
useEffect(() => {
setCallbacks(loadCfg()[selected]?.callbacks ?? "");
setLogouts(loadCfg()[selected]?.logouts ?? "");
setOrigins(loadCfg()[selected]?.origins ?? "");
}, [selected]);
return ;
}
return
;
};
export const SignUpForm = () => {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [storeReady, setStoreReady] = useState(false);
useEffect(() => {
let unsubscribe = null;
function init() {
setStoreReady(true);
unsubscribe = window.autorun(() => {
const authenticated = window.rootStore?.sessionStore?.isAuthenticated || false;
setIsAuthenticated(authenticated);
});
}
if (window.rootStore) {
init();
} else {
window.addEventListener("adu:storeReady", init);
}
return () => {
window.removeEventListener("adu:storeReady", init);
unsubscribe?.();
};
}, []);
function LoggedInForm({sampleApp}) {
const LS_APPS_KEY = "auth_demo_apps";
const LS_APP_CFG_KEY = "auth_demo_app_cfg";
const CHANNEL = "auth_flows_sync_v1";
const mkChannel = () => new BroadcastChannel(CHANNEL);
function uid() {
return Math.random().toString(36).slice(2) + Date.now().toString(36);
}
function loadApps() {
const raw = localStorage.getItem(LS_APPS_KEY);
if (raw) return JSON.parse(raw);
const seeded = [{
id: "{yourClientId}",
name: "Default App"
}];
localStorage.setItem(LS_APPS_KEY, JSON.stringify(seeded));
return seeded;
}
function saveApps(apps) {
localStorage.setItem(LS_APPS_KEY, JSON.stringify(apps));
}
function loadCfg() {
const raw = localStorage.getItem(LS_APP_CFG_KEY);
return raw ? JSON.parse(raw) : {};
}
function saveCfg(cfg) {
localStorage.setItem(LS_APP_CFG_KEY, JSON.stringify(cfg));
}
const RightChevron = ({className = "w-5 h-5", ...props}) =>
;
const LightningIcon = () =>
;
const LayersIcon = () =>
;
const GithubIcon = () =>
;
function IconTile({children}) {
return
{children}
;
}
function Card({className = "", children}) {
return {children}
;
}
function Button({variant = "primary", type = "button", onClick, children}) {
const base = "inline-flex items-center justify-center gap-2 h-10 px-4 rounded-xl font-medium transition";
let styles = "";
if (variant === "primary") {
styles = "mint-bg-indigo-600 text-white hover:mint-bg-indigo-700";
} else if (variant === "outline") {
styles = "border border-zinc-300 dark:border-zinc-700 mint-bg-transparent hover:mint-bg-zinc-50 dark:hover:mint-bg-zinc-800";
} else if (variant === "ghost") {
styles = "hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800";
}
return
{children}
;
}
function Input({id, label, value, onChange, placeholder, name}) {
return
{label}
;
}
function Select({label, value, onChange, options}) {
return
{label}
onChange(e.target.value)}>
{options.map(o =>
{o.name}
)}
;
}
function Toast({open, onClose, children}) {
useEffect(() => {
if (!open) return;
const t = setTimeout(onClose, 2200);
return () => clearTimeout(t);
}, [open, onClose]);
return ;
}
function Flows() {
const [route, setRoute] = useState("menu");
const [apps, setApps] = useState(loadApps());
const [cfg, setCfg] = useState(loadCfg());
const [selected, setSelected] = useState(apps[0]?.id || "");
const [toast, setToast] = useState(false);
const [bc] = useState(() => mkChannel());
useEffect(() => {
if (!apps.find(a => a.id === selected)) {
setSelected(apps[0]?.id || "");
}
}, [apps, selected]);
useEffect(() => {
const onMsg = e => {
const {type, payload} = e.data || ({});
switch (type) {
case "NAV":
setRoute(payload.route);
break;
case "SELECT":
setSelected(payload.appId);
break;
case "APPS_UPDATED":
setApps(loadApps());
break;
case "CFG_UPDATED":
setCfg(loadCfg());
setToast(true);
break;
default:
break;
}
};
bc.addEventListener("message", onMsg);
return () => bc.removeEventListener("message", onMsg);
}, [bc]);
const nav = nextRoute => {
setRoute(nextRoute);
bc.postMessage({
type: "NAV",
payload: {
route: nextRoute
}
});
};
const selectApp = appId => {
setSelected(appId);
bc.postMessage({
type: "SELECT",
payload: {
appId
}
});
};
const onCreate = name => {
const id = uid();
const next = [...apps, {
id,
name: name || "Untitled"
}];
setApps(next);
saveApps(next);
bc.postMessage({
type: "APPS_UPDATED"
});
selectApp(id);
nav("integrate");
};
const onSaveCfg = (appId, data) => {
const next = {
...cfg,
[appId]: data
};
setCfg(next);
saveCfg(next);
setToast(true);
bc.postMessage({
type: "CFG_UPDATED"
});
};
return
{route === "menu" &&
nav("create")} onIntegrate={() => nav("integrate")} />}
{route === "create" && nav("menu")} onSave={onCreate} />}
{route === "integrate" && onSaveCfg(selected, data)} onCancel={() => nav("menu")} />}
setToast(false)}>
Successfully saved your changes.
;
}
function Menu({onCreate, onIntegrate}) {
return ;
}
function CreateForm({onSave, onCancel}) {
const [name, setName] = useState("");
return ;
}
function IntegrateForm({apps, selected, onSelect, saved, onSave, onCancel}) {
const [callbacks, setCallbacks] = useState(saved?.callbacks ?? "");
const [logouts, setLogouts] = useState(saved?.logouts ?? "");
const [origins, setOrigins] = useState(saved?.origins ?? "");
useEffect(() => {
setCallbacks(loadCfg()[selected]?.callbacks ?? "");
setLogouts(loadCfg()[selected]?.logouts ?? "");
setOrigins(loadCfg()[selected]?.origins ?? "");
}, [selected]);
return ;
}
return
;
}
;
function SignUpFormInternal() {
return
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
console.log("sign up")} className="bg-primary dark:bg-primary-light text-white dark:text-black px-4 py-2 rounded-md mt-4 font-medium" style={{
width: "140px"
}}>
Sign up
;
}
;
return <>;
};
export const SideMenuSectionItem = ({id, children}) => {
return ;
};
export const SideMenu = ({sections, children}) => {
const [visibleSection, setVisibleSection] = useState(sections[0]?.id ?? null);
const checkVisibility = () => {
let currentVisible = null;
const viewportHeight = window.innerHeight;
const scrollY = window.scrollY;
sections.forEach(({id}) => {
const section = document.getElementById(id);
if (section) {
const rect = section.getBoundingClientRect();
const sectionTop = rect.top + scrollY;
const sectionBottom = sectionTop + rect.height;
const multiplier = viewportHeight > 1600 ? 0.34 : 0.22;
if (scrollY + viewportHeight * multiplier >= sectionTop && scrollY <= sectionBottom) {
currentVisible = id;
}
}
});
if (currentVisible && currentVisible !== visibleSection) {
setVisibleSection(currentVisible);
}
};
useEffect(() => {
const throttledCheck = () => {
setTimeout(checkVisibility, 100);
};
checkVisibility();
window.addEventListener("scroll", throttledCheck);
return () => {
window.removeEventListener("scroll", throttledCheck);
};
}, [sections, visibleSection]);
useEffect(() => {
sections.forEach(({id}) => {
const section = document.getElementById(id);
const sideMenuItem = document.getElementById(`side-menu-item-${id}`);
if (section) {
if (id === visibleSection) {
section.classList.add("active-section");
} else {
section.classList.remove("active-section");
}
}
if (sideMenuItem) {
if (id === visibleSection) {
sideMenuItem.classList.add("active-side-menu-item");
} else {
sideMenuItem.classList.remove("active-side-menu-item");
}
}
});
}, [visibleSection, sections]);
return
{children.map(child => {
if (child.props.id === visibleSection) {
return child;
}
return null;
})}
;
};
export const Section = ({id, title, stepNumber, children, isSingleColumn = false}) => {
return
{}
{children}
;
};
export const Content = ({title, children}) => {
return
{title &&
{title} }
{children}
;
};
export const Recipe = ({children, isSingleColumn = false}) => {
return
{children}
;
};
Auth0 vous permet d’ajouter l’authentification et de pouvoir accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à une application Python [Django](https://www.djangoproject.com/), à l’aide de la trousse SDK [Authlib](https://authlib.org/).
Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.
### Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide de démarrage rapide seront automatiquement mis à jour pour votre application dans le [Tableau de bord](https://manage.auth0.com/dashboard/us/auth0-dsepaid/), qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
### Configurer les URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre exemple de projet, définissez cette URL comme suit : `http://localhost:3000``/callback`.
### Configuration des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre exemple de projet, définissez cette URL comme suit : `http://localhost:3000`.
Pour cette intégration, vous ajouterez plusieurs dépendances de bibliothèque, telles qu’Authlib. Créez un fichier `requirements.txt` dans votre répertoire de projet et incluez ce qui suit :
```
authlib ~= 1.0
django ~= 4.0
python-dotenv ~= 0.19
requests ~= 2.27
```
Exécutez la commande suivante depuis votre interface système pour accéder à ces dépendances :
`pip install -r requirements.txt`
Ensuite, créez un fichier `.env` dans votre répertoire de projet. Ce fichier contiendra les clés de vos clients et d’autres détails de configuration.
```
AUTH0_CLIENT_ID={yourClientId}
AUTH0_CLIENT_SECRET={yourClientSecret}
AUTH0_DOMAIN={yourDomain}
```
Si vous avez déjà une application Django installée, passez à l’étape suivante. Pour un nouveau projet d’application, exécutez la commande suivante :
`django-admin startproject webappexample`
Placez-vous dans le nouveau dossier du projet :
`cd webappexample`
Ouvrez le fichier `webappexample/settings.py` pour examiner les valeurs `.env`.
En haut du fichier, ajoutez les importations `os` et `dotenv`.
Ensuite, sous la définition `BASE_DIR`, ajoutez la variable `TEMPLATE_DIR`.
Ensuite, trouvez la variable `TEMPLATES` et mettez à jour la valeur `DIRS` pour y ajouter notre chaîne `TEMPLATE_DIR`. Cette action détermine le chemin des fichiers modèles, que vous créerez à une étape future. Ne modifiez aucun autre élément de ce tableau.
À la fin de ce fichier, ajoutez le code pour charger la configuration d’Auth0.
Pour commencer à créer votre application, ouvrez le fichier `webappexample/views.py` dans votre IDE.
Importez toutes les bibliothèques nécessaires à votre application.
Vous pouvez maintenant configurer Authlib pour gérer l’authentification de votre application avec Auth0.
Découvrez les options de configuration possibles pour la méthode Authlib’s OAuth `register()` à partir de [leur documentation.](https://docs.authlib.org/en/latest/client/frameworks.html#using-oauth-2-0-to-log-in)
Dans cet exemple, vous allez ajouter quatre routes pour votre application : connexion, callback, déconnexion et index.
* `login` – Lorsque les visiteurs de votre application se rendent sur la route `/login` ils seront redirigés vers Auth0 pour commencer le processus d’authentification.
* `callback` – Après la connexion de vos utilisateurs à Auth0, ceux-ci reviendront à votre application à la route `/callback`. Cette route enregistre la session de l’utilisateur et permet de ne plus avoir à se reconnecter lorsqu’il revient.
* `logout` – La route `/logout` permet aux utilisateurs de se déconnecter de votre application. Cette route efface la session de l’utilisateur dans votre application et redirige vers le point de terminaison de déconnexion d’Auth0 pour s’assurer que la session n’est plus enregistrée. Ensuite, l’application redirige l’utilisateur vers votre route d’accueil.
* `index` – La route d’accueil affichera les détails de l’utilisateur authentifié ou permettra aux visiteurs de se connecter.
Remplacez le contenu de votre fichier `webappexample/urls.py` par le code à droite pour vous connecter à ces nouvelles routes.
Cela dirigera les routes `/login`, `/callback`, `/logout` et `/` vers les gestionnaires appropriés.
Vous allez ensuite créer un fichier modèle utilisé dans la route de la page d’accueil.
Créez un nouveau sous-répertoire dans le dossier `webappexample` nommé `templates`, et créez un fichier `index.html`.
Le fichier `index.html` contiendra un code modèle pour afficher les informations de l’utilisateur s’il est connecté, ou pour lui présenter un bouton de connexion s’il ne l’est pas.
Vous êtes prêts à exécuter votre application! À partir de votre Directory de projet, ouvrez un interface et utilisez :
```
python3 manage.py migrate
python3 manage.py runserver 3000
```
Votre application devrait maintenant être prête à s’ouvrir à partir de votre navigateur à l’adresse `http://localhost:3000`.
##### Point de contrôle
Visitez [http://localhost:3000](http://localhost:3000/) pour des raisons de vérification. Un bouton de connexion devrait vous permettre de vous connecter à Auth0, puis de revenir à votre application pour consulter les informations relatives à votre profil.
## Étapes suivantes
Beau travail! Si vous en êtes arrivé là, vous devriez avoir la connexion, la déconnexion et les informations de profil utilisateur actives dans votre application.
Cela conclut notre tutoriel de démarrage rapide, mais il y a tellement plus à explorer. Pour en savoir plus sur ce que vous pouvez faire avec Auth0, consultez :
* [Auth0 Dashboard](https://manage.auth0.com/#) : apprenez à configurer et gérer votre locataire et vos applications Auth0
* [Auth0 Marketplace](https://marketplace.auth0.com/) : découvrez des intégrations que vous pouvez activer pour étendre les fonctionnalités d’Auth0
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... other settings ...
TEMPLATES = [
{
# Leave other lines as they are; we're just updating `DIRS`.
"DIRS": [TEMPLATE_DIR],
},
]
# ... other settings ...
# Load environment definition file
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Load Auth0 application settings into memory
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```py webappexample/views.py highlight={1-18} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```
```py webappexample/views.py highlight={1-18} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... other settings ...
TEMPLATES = [
{
# Leave other lines as they are; we're just updating `DIRS`.
"DIRS": [TEMPLATE_DIR],
},
]
# ... other settings ...
# Load environment definition file
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Load Auth0 application settings into memory
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```py webappexample/views.py highlight={20-52} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... other settings ...
TEMPLATES = [
{
# Leave other lines as they are; we're just updating `DIRS`.
"DIRS": [TEMPLATE_DIR],
},
]
# ... other settings ...
# Load environment definition file
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Load Auth0 application settings into memory
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... other settings ...
TEMPLATES = [
{
# Leave other lines as they are; we're just updating `DIRS`.
"DIRS": [TEMPLATE_DIR],
},
]
# ... other settings ...
# Load environment definition file
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Load Auth0 application settings into memory
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/views.py highlight={1-18} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```
```html webappexample/templates/index.html lines theme={null}
Auth0 Example
{% if session %}
Welcome {{session.userinfo.name}}!
Logout
{% else %}
Welcome Guest
Login
{% endif %}
```
```py webappexample/settings.py lines theme={null}
import os
from pathlib import Path
from dotenv import load_dotenv, find_dotenv
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, "webappexample", "templates")
# ... other settings ...
TEMPLATES = [
{
# Leave other lines as they are; we're just updating `DIRS`.
"DIRS": [TEMPLATE_DIR],
},
]
# ... other settings ...
# Load environment definition file
ENV_FILE = find_dotenv()
if ENV_FILE:
load_dotenv(ENV_FILE)
# Load Auth0 application settings into memory
AUTH0_DOMAIN = os.environ.get("AUTH0_DOMAIN")
AUTH0_CLIENT_ID = os.environ.get("AUTH0_CLIENT_ID")
AUTH0_CLIENT_SECRET = os.environ.get("AUTH0_CLIENT_SECRET")
```
```py webappexample/urls.py lines theme={null}
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("login", views.login, name="login"),
path("logout", views.logout, name="logout"),
path("callback", views.callback, name="callback"),
]
```
```py webappexample/views.py highlight={1-18} lines theme={null}
import json
from authlib.integrations.django_client import OAuth
from django.conf import settings
from django.shortcuts import redirect, render, redirect
from django.urls import reverse
from urllib.parse import quote_plus, urlencode
oauth = OAuth()
oauth.register(
"auth0",
client_id=settings.AUTH0_CLIENT_ID,
client_secret=settings.AUTH0_CLIENT_SECRET,
client_kwargs={
"scope": "openid profile email",
},
server_metadata_url=f"https://{settings.AUTH0_DOMAIN}/.well-known/openid-configuration",
)
def login(request):
return oauth.auth0.authorize_redirect(
request, request.build_absolute_uri(reverse("callback"))
)
def callback(request):
token = oauth.auth0.authorize_access_token(request)
request.session["user"] = token
return redirect(request.build_absolute_uri(reverse("index")))
def logout(request):
request.session.clear()
return redirect(
f"https://{settings.AUTH0_DOMAIN}/v2/logout?"
+ urlencode(
{
"returnTo": request.build_absolute_uri(reverse("index")),
"client_id": settings.AUTH0_CLIENT_ID,
},
quote_via=quote_plus,
),
)
def index(request):
return render(
request,
"index.html",
context={
"session": request.session.get("user"),
"pretty": json.dumps(request.session.get("user"), indent=4),
},
)
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.