> ## 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.
# Angularアプリケーションにログインを追加する
> このガイドは、AngularアプリケーションにAuth0 Angular SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。
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 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}
;
};
export const sections = [{
id: "auth0を構成する",
title: "Auth0を構成する"
}, {
id: "auth0-angular-sdkをインストールする",
title: "Auth0 Angular SDKをインストールする"
}, {
id: "auth0を登録-提供する",
title: "Auth0を登録・提供する"
}, {
id: "アプリケーションにログインを追加する",
title: "アプリケーションにログインを追加する"
}, {
id: "アプリケーションにログアウトを追加する",
title: "アプリケーションにログアウトを追加する"
}, {
id: "ユーザープロファイル情報を表示する",
title: "ユーザープロファイル情報を表示する"
}];
Angularでユーザー認証を実装するための詳しい情報については、「[例を挙げて説明するAngular認証ガイド](https://developer.auth0.com/resources/guides/spa/angular/basic-authentication)」を参照してください。このガイドでは、サインアップボタンを作成する方法、ルートガードを追加する方法、そして保護されたAPIをAngularから呼び出す方法が詳しく説明されています。
Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、Angularアプリケーションに[Auth0 Angular SDK](https://github.com/auth0/auth0-angular)を使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。
このクイックスタートを使用するには、以下の手順に従います：
Auth0のサービスを利用するには、Auth0 Dashboadに設定済みのアプリケーションがある必要があります。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。
### アプリケーションを構成する
対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0
APIを呼び出す際に使用されます。
このクイックスタートを使って構成されたすべての設定は、[Dashboard](https://manage.auth0.com/#/)のアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。
代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。
### Callback URLを構成する
Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。
サンプルプロジェクトに沿って進めている場合は、`http://localhost:4200`に設定してください。
### ログアウトURLを構成する
ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。
サンプルプロジェクトに沿って進めている場合は、`http://localhost:4200`に設定してください。
### Allowed Web Origins（許可されているWebオリジン）を構成する
［Allowed Web
Origin（許可されているWebオリジン）］とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。
サンプルプロジェクトに沿って進めている場合は、`http://localhost:4200`に設定してください。
Angularアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0は[Angular SDK](https://github.com/auth0/auth0-angular)を提供しています。
ターミナルで以下のコマンドを実行してAuth0 Angular SDKをインストールします：
```bash theme={null}
npm install @auth0/auth0-angular
```
SDKはモジュールや認証サービスなど、Auth0をAngularアプリケーションに慣用的に統合しやすくする種類をいくつか公開しています。
SDKは、SDKが機能するために必要なすべてのサービスを含んだprovide関数である、`provideAuth0`をエクスポートします。これをアプリケーションで登録するには、以下のようにします。
1. `main.ts`ファイルを開きます。
2. `@auth0/auth0-angular`パッケージから`provideAuth0`関数をインポートします。
3. `provideAuth0`を`bootstrapApplication`内の`providers`に追加することで、アプリケーションに追加します。
4. `AuthService`を`AppComponent`に注入します。
`provideAuth0`関数は`domain`プロパティと`clientId`プロパティを取ります。これらのプロパティの値は、Auth0で登録したシングルページアプリケーション（SPA）の\*\*［Settings（設定）］\*\* にある**Domain（ドメイン）** と\*\*Client
ID（クライアントID）\*\*の値に対応します。その上に、`authorizationParams.redirect_uri`を構成します。これによって、認証に成功した後、Auth0はユーザーを特定のURLにリダイレクトで戻すことができます。
[Auth0を使用したカスタムドメイン](/docs/ja-jp/custom-domains)では、ドメインプロパティの値は［Settings（設定）］タブに反映された値でなく、カスタムドメインの値になります。
Auth0アプリケーションとAuth0 Angular
SDKの構成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、`AuthService`クラスからSDKの`loginWithRedirect()`メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。そこでAuth0はユーザーを認証することができます。ユーザーが認証に成功すると、アプリケーション、およびこのクイックスタートで前にセットアップしたCallback
URLへリダイレクトされます。
アプリケーションで選択時に`loginWithRedirect()`を呼び出すログインボタンを作成します。
##### チェックポイント
アプリケーションにログインできるようになります。
アプリケーションを実行し、ログインボタンを選択します。以下の点を確認します：
* ユーザー名とパスワードを使って、ログインまたはサインアップできる。
* アプリケーションによって[Auth0ユニバーサルログイン](https://auth0.com/universal-login)ページにリダイレクトされる。
* 認証用にAuth0にリダイレクトされる。
* 認証した後、Auth0はアプリケーションにリダイレクトで戻される。
* コンソールでAuth0に関連したエラーを受け取らない。
プロジェクトにログインしたユーザーには、[ログアウトする方法](/docs/ja-jp/logout/guides/logout-auth0)も必要です。SDKには、`AuthService`クラスでアプリからユーザーをログアウトするのに使用できる`logout()`メソッドが用意されています。ユーザーはログアウトすると、[Auth0ログアウトエンドポイント](https://auth0.com/docs/api/authentication?javascript#logout)にリダイレクトされてから、即座に、アプリケーションとこのクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。
アプリケーションで選択時に`logout()`を呼び出すログアウトボタンを作成します。
SDKによって`AuthService`クラスで`isAuthenticated$`
Observableが公開されることで、ユーザーが認証されているかどうかを確認することができます。`isAuthenticated$`
Observableの値に基づいて、条件付きでログインボタンとログアウトボタンを作成することができます。または、シングルボタンを使って、ログインとログアウトの両方のボタンと条件付きレンダリングを組み合わせることができます。
##### チェックポイント
アプリケーションからログアウトできるようになります。
アプリケーションを実行し、ログインし、ログアウトボタンを選択します。以下の点を確認します：
* Auth0のログアウトエンドポイントにリダイレクトされている。
* Auth0がアプリケーションと正しいログアウトURLへのリダイレクトで戻される。
* アプリケーションにログインしていない。
* コンソールでAuth0に関連したエラーを受け取らない。
ユーザーがログインやログアウトできるようになったら、認証済みのユーザーに関連付けられた[プロファイル情報](/docs/ja-jp/users/concepts/overview-user-profile)を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真を表示することで、ユーザーインターフェイスをパーソナライズできるようになりたいかもしれません。
Auth0 Angular SDKは、`AuthService`クラスによって公開された`user$`
Observableを介してユーザー情報を提供します。`user$`
Observableにはユーザーのアイデンティティに関する機密情報とアーティファクトが含まれるため、この方法が使用できるかはユーザーの認証ステータスによります。幸い、`user$`
Observableは、`isAuthenticated$`
Observableがtrueである場合にのみ値を出力するよう構成されています。そのため、ユーザープロファイルデータにアクセスする前に、認証状態を手動で確認する必要はありません。
SDKは、`AuthService`クラスでユーザーが認証されているかどうかを確認することができる`isAuthenticated$`
Observableも公開します。これを使って、たとえば、UI要素を表示・非表示にするかを判断することができます。
インタラクティブパネルで`UserProfileComponent`コードを確認し、これらの関数の使用方法の例をチェックします。
##### チェックポイント
ユーザープロファイル情報を表示することができるようになります。
アプリケーションを実行して次の点を確認します：
* ログイン後にユーザー情報が正しく表示される。
* ログアウト後にユーザー情報が表示されない。
## 次のステップ
成功です！ここまで来れば、アプリケーションにログイン、ログアウト、ユーザープロファイル情報が備わっているはずです。
これでクイックスタートチュートリアルは終了ですが、機能はまだまだたくさんあります。Auth0でできることについて詳しくは、以下をご覧ください。
* [Auth0 Dashboard](https://manage.auth0.com/#) - Auth0のテナントやアプリケーションを構成して管理する方法について説明します
* [auth0-angular SDK](https://github.com/auth0/auth0-angular) - このチュートリアルで使用されているSDKをより詳しく説明します
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Auth0の機能性を拡張できる各種の統合を見つけられます
```tsx main.ts highlight={7-13} lines theme={null}
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent, {
providers: [
provideAuth0({
domain: '{yourDomain}',
clientId: '{yourClientId}',
authorizationParams: {
redirect_uri: window.location.origin
}
}),
]
});
```
```tsx login-button.ts highlight={11-13} lines theme={null}
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'app-login-button',
template: 'Log in ',
standalone: true
})
export class LoginButtonComponent {
constructor(private auth: AuthService) {}
login() {
this.auth.loginWithRedirect();
}
}
```
```tsx logout-button.ts highlight={19-25} lines theme={null}
import { Component, Inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-logout-button',
template: `
Log out
`,
standalone: true
})
export class LogoutButtonComponent {
constructor(
@Inject(DOCUMENT) public document: Document,
private auth: AuthService
) {}
logout() {
this.auth.logout({
logoutParams: {
returnTo: this.document.location.origin
}
});
}
}
```
```tsx user-profile.ts lines theme={null}
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'app-user-profile',
template: `
{{ user.name }}
{{ user.email }}
`,
standalone: true
})
export class UserProfileComponent {
constructor(public auth: AuthService) {}
}
```
```tsx login-button.ts highlight={11-13} lines theme={null}
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'app-login-button',
template: 'Log in ',
standalone: true
})
export class LoginButtonComponent {
constructor(private auth: AuthService) {}
login() {
this.auth.loginWithRedirect();
}
}
```
```tsx main.ts highlight={7-13} lines theme={null}
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent, {
providers: [
provideAuth0({
domain: '{yourDomain}',
clientId: '{yourClientId}',
authorizationParams: {
redirect_uri: window.location.origin
}
}),
]
});
```
```tsx logout-button.ts highlight={19-25} lines theme={null}
import { Component, Inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-logout-button',
template: `
Log out
`,
standalone: true
})
export class LogoutButtonComponent {
constructor(
@Inject(DOCUMENT) public document: Document,
private auth: AuthService
) {}
logout() {
this.auth.logout({
logoutParams: {
returnTo: this.document.location.origin
}
});
}
}
```
```tsx user-profile.ts lines theme={null}
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'app-user-profile',
template: `
{{ user.name }}
{{ user.email }}
`,
standalone: true
})
export class UserProfileComponent {
constructor(public auth: AuthService) {}
}
```
```tsx logout-button.ts highlight={19-25} lines theme={null}
import { Component, Inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-logout-button',
template: `
Log out
`,
standalone: true
})
export class LogoutButtonComponent {
constructor(
@Inject(DOCUMENT) public document: Document,
private auth: AuthService
) {}
logout() {
this.auth.logout({
logoutParams: {
returnTo: this.document.location.origin
}
});
}
}
```
```tsx main.ts highlight={7-13} lines theme={null}
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent, {
providers: [
provideAuth0({
domain: '{yourDomain}',
clientId: '{yourClientId}',
authorizationParams: {
redirect_uri: window.location.origin
}
}),
]
});
```
```tsx login-button.ts highlight={11-13} lines theme={null}
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'app-login-button',
template: 'Log in ',
standalone: true
})
export class LoginButtonComponent {
constructor(private auth: AuthService) {}
login() {
this.auth.loginWithRedirect();
}
}
```
```tsx user-profile.ts lines theme={null}
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'app-user-profile',
template: `
{{ user.name }}
{{ user.email }}
`,
standalone: true
})
export class UserProfileComponent {
constructor(public auth: AuthService) {}
}
```
```tsx user-profile.ts lines theme={null}
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'app-user-profile',
template: `
{{ user.name }}
{{ user.email }}
`,
standalone: true
})
export class UserProfileComponent {
constructor(public auth: AuthService) {}
}
```
```tsx main.ts highlight={7-13} lines theme={null}
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAuth0 } from '@auth0/auth0-angular';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent, {
providers: [
provideAuth0({
domain: '{yourDomain}',
clientId: '{yourClientId}',
authorizationParams: {
redirect_uri: window.location.origin
}
}),
]
});
```
```tsx login-button.ts highlight={11-13} lines theme={null}
import { Component } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
@Component({
selector: 'app-login-button',
template: 'Log in ',
standalone: true
})
export class LoginButtonComponent {
constructor(private auth: AuthService) {}
login() {
this.auth.loginWithRedirect();
}
}
```
```tsx logout-button.ts highlight={19-25} lines theme={null}
import { Component, Inject } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-logout-button',
template: `
Log out
`,
standalone: true
})
export class LogoutButtonComponent {
constructor(
@Inject(DOCUMENT) public document: Document,
private auth: AuthService
) {}
logout() {
this.auth.logout({
logoutParams: {
returnTo: this.document.location.origin
}
});
}
}
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.