> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-docs-event-stream-action-templates.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> This guide demonstrates how to integrate Auth0 with a Python Django application using the Authlib SDK.
# Add Login to your Django Application
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 allows you to add authentication and gain access to user profile information in your application. This guide
demonstrates how to integrate Auth0 with a Python [Django](https://www.djangoproject.com/) application using the [Authlib](https://authlib.org/) SDK.
To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is
where you will configure how you want authentication to work for the project you are developing.
### Configure an application
Use the interactive selector to create a new Auth0 application or select an existing application that represents
the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID
that your application code will use to call Auth0 APIs through the SDK.
Any settings you configure using this quickstart will automatically update for your Application in the [Dashboard](https://manage.auth0.com/dashboard/us/auth0-dsepaid/), which is where you can manage your Applications in the future.
If you would rather explore a complete configuration, you can view a sample application instead.
### Configure Callback URLs
A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have
authenticated. If not set, users will not be returned to your application after they log in.
If you are following along with our sample project, set this to
`http://localhost:3000/callback`.
### Configure Logout URLs
A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged
out. If not set, users will not be able to log out from your application and will receive an error.
If you are following along with our sample project, set this to `http://localhost:3000`.
For this integration, you will add several library dependencies, such as Authlib. Create a
`requirements.txt` file in your project directory, and include the following:
```text lines theme={null}
authlib ~= 1.0
django ~= 4.0
python-dotenv ~= 0.19
requests ~= 2.27
```
Run the following command from your shell to make these dependencies available:
```text lines theme={null}
pip install -r requirements.txt
```
Next, create an `.env` file in your project directory. This file will hold your client keys and other
configuration details.
```text lines theme={null}
AUTH0_CLIENT_ID={yourClientId}
AUTH0_CLIENT_SECRET={yourClientSecret}
AUTH0_DOMAIN={yourDomain}
```
If you already have a Django application setup, skip to the next step. For a new application project, run the
following command:
```text lines theme={null}
django-admin startproject webappexample
```
Change to the new project folder:
```text lines theme={null}
cd webappexample
```
Open the `webappexample/settings.py` file to review the `.env` values.
At the top of the file, add the `os` and `dotenv` imports.
Next, beneath the `BASE_DIR` definition, add the `TEMPLATE_DIR` variable.
Next, find the `TEMPLATES` variable and update the `DIRS` value to add our
`TEMPLATE_DIR` string. This determines the path of the template files, which you will create in a
future step. Keep any other content of this array the same.
At the end of this file, add the code to load the Auth0 config.
To begin creating your application, open the `webappexample/views.py` file in your IDE.
Import all the libraries your application needs.
Now you can configure Authlib to handle your application's authentication with Auth0.
Learn more about the configuration options available for Authlib's OAuth `register()` method from [their documentation.](https://docs.authlib.org/en/latest/client/frameworks.html#using-oauth-2-0-to-log-in)
In this example, you will add four routes for your application: the login, callback, logout, and index routes.
* `login` - When visitors to your app visit the `/login` route, they will reach Auth0 to
begin the authentication flow.
* `callback` - After your users finish logging in with Auth0, they will return to your application
at the `/callback` route. This route saves the session for the user and bypasses the need for them
to login again when they return.
* `logout` - The `/logout` route signs users out from your application. This route clears
the user session in your app and redirects to the Auth0 logout endpoint to ensure the session is no longer
saved. Then, the application redirects the user to your home route.
* `index` - The home route will render an authenticated user's details or allow visitors to sign in.
Replace the contents of your `webappexample/urls.py` file with the code on the right to connect to
these new routes.
This will route the `/login`, `/callback`, `/logout` and `/` routes
to the correct handlers.
Next, you will create a template file used in the home page route.
Create a new sub-directory within the `webappexample` folder named `templates`, and create
a `index.html` file.
The `index.html` file will contain template code to display the user's info if logged in or present
them with a login button if logged out.
You're ready to run your application! From your project directory, open a shell and use:
```text lines theme={null}
python3 manage.py migrate
python3 manage.py runserver 3000
```
Your application should now be ready to open from your browser at [http://localhost:3000](http://localhost:3000).
##### Checkpoint
Visit [http://localhost:3000](http://localhost:3000/) to verify. You should find a login button routing to
Auth0 for login, then back to your application to see your profile information.
## Next Steps
Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.
This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:
* [Auth0 Dashboard](https://manage.auth0.com/dashboard/us/dev-gja8kxz4ndtex3rq) - Learn how to configure and manage your Auth0 tenant and applications
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Discover integrations you can enable to extend Auth0’s functionality
```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.