-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
265 lines (259 loc) · 191 KB
/
Copy pathindex.html
File metadata and controls
265 lines (259 loc) · 191 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-tutorial/Plugins/oauth" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.9.2">
<title data-rh="true">OAuth Authentication | Agent-first open-source admin panel framework</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://adminforth.dev/img/og.jpg"><meta data-rh="true" name="twitter:image" content="https://adminforth.dev/img/og.jpg"><meta data-rh="true" property="og:url" content="https://adminforth.dev/docs/tutorial/Plugins/oauth/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="OAuth Authentication | Agent-first open-source admin panel framework"><meta data-rh="true" name="description" content="Guide to the OAuth Authentication plugin, including provider setup, plugin configuration, email confirmation, and login flows for external identity providers."><meta data-rh="true" property="og:description" content="Guide to the OAuth Authentication plugin, including provider setup, plugin configuration, email confirmation, and login flows for external identity providers."><meta data-rh="true" name="twitter:title" content="OAuth Authentication"><meta data-rh="true" name="twitter:description" content="Guide to the OAuth Authentication plugin, including provider setup, plugin configuration, email confirmation, and login flows for external identity providers."><link data-rh="true" rel="icon" href="/img/favicon.png"><link data-rh="true" rel="canonical" href="https://adminforth.dev/docs/tutorial/Plugins/oauth/"><link data-rh="true" rel="alternate" href="https://adminforth.dev/docs/tutorial/Plugins/oauth/" hreflang="en"><link data-rh="true" rel="alternate" href="https://adminforth.dev/docs/tutorial/Plugins/oauth/" hreflang="x-default"><link data-rh="true" rel="preconnect" href="https://VSIPOF54AV-dsn.algolia.net" crossorigin="anonymous"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"TechArticle","headline":"OAuth Authentication","description":"Guide to the OAuth Authentication plugin, including provider setup, plugin configuration, email confirmation, and login flows for external identity providers.","url":"https://adminforth.dev/docs/tutorial/Plugins/oauth","dateModified":"2026-08-17T05:01:16.000Z"}</script><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Plugins","item":"https://adminforth.dev/docs/tutorial/ListOfPlugins"},{"@type":"ListItem","position":2,"name":"OAuth Authentication","item":"https://adminforth.dev/docs/tutorial/Plugins/oauth"}]}</script><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Agent-first open-source admin panel framework RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Agent-first open-source admin panel framework Atom Feed">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7K99Q2BH04"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","G-7K99Q2BH04",{anonymize_ip:!0})</script>
<link rel="search" type="application/opensearchdescription+xml" title="Agent-first open-source admin panel framework" href="/opensearch.xml">
<meta name="application-name" content="AdminForth">
<meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
<meta name="googlebot" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
<meta name="keywords" content="agent-first admin panel framework, open-source admin panel, agentic back office, tailwind admin framework, vue typescript admin panel, internal admin agent">
<link rel="image_src" href="https://adminforth.dev/img/adminforth_screenshot.png">
<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","name":"AdminForth","url":"https://adminforth.dev","description":"Agent-first open-source admin panel framework. Build robust and powerful agentic back-office panels for your projects while maintaining full control over the code.","keywords":"backoffice, vue backoffice, agent-first admin panel framework, open-source admin panel, agentic back office, tailwind admin framework, vue typescript admin panel, internal admin agent"}</script>
<script src="/scripts/adminforth.js"></script>
<script src="/scripts/tluma-config.js"></script>
<script src="https://tluma.ai/widget.js" async></script><link rel="stylesheet" href="/assets/css/styles.e5bdffa0.css">
<script src="/assets/js/runtime~main.ee0f97d0.js" defer="defer"></script>
<script src="/assets/js/main.a1324122.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<svg style="display: none;"><defs>
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||"light"),document.documentElement.setAttribute("data-theme-choice",t||"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="AdminForth Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="AdminForth Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">AdminForth</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/docs/tutorial/gettingStarted/">Tutorial</a><a class="navbar__item navbar__link" href="/docs/api/">API</a><a class="navbar__item navbar__link" href="/blog/">Blog</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class="navbarSearchContainer_Bca1"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"></span></button></div><a href="https://demo.adminforth.dev/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Live Demo<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><a href="https://github.com/devforth/adminforth" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/tutorial/gettingStarted/"><span title="Getting Started" class="linkLabel_WmDU">Getting Started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item hidden-sidebar"><a class="menu__link" href="/docs/tutorial/hello-world/"><span title="Hello world app without CLI" class="linkLabel_WmDU">Hello world app without CLI</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/tutorial/glossary/"><span title="Glossary" class="linkLabel_WmDU">Glossary</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/docs/tutorial/Customization/branding/"><span title="Customization" class="categoryLinkLabel_W154">Customization</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/branding/"><span title="Branding and Theming" class="linkLabel_WmDU">Branding and Theming</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/customFieldRendering/"><span title="Custom record field rendering" class="linkLabel_WmDU">Custom record field rendering</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/virtualColumns/"><span title="Virtual columns" class="linkLabel_WmDU">Virtual columns</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/hooks/"><span title="Hooks" class="linkLabel_WmDU">Hooks</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/limitingAccess/"><span title="Limiting actions access" class="linkLabel_WmDU">Limiting actions access</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/customPages/"><span title="Custom pages" class="linkLabel_WmDU">Custom pages</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/alert/"><span title="Alerts and confirmations" class="linkLabel_WmDU">Alerts and confirmations</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/pageInjections/"><span title="Page Injections" class="linkLabel_WmDU">Page Injections</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/Actions/"><span title="Actions" class="linkLabel_WmDU">Actions</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/menuConfiguration/"><span title="Menu & Header" class="linkLabel_WmDU">Menu & Header</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/dataApi/"><span title="Data API" class="linkLabel_WmDU">Data API</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/security/"><span title="Security" class="linkLabel_WmDU">Security</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/standardPagesTuning/"><span title="Standard pages tuning" class="linkLabel_WmDU">Standard pages tuning</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/afcl/"><span title="AdminForth Components Library" class="linkLabel_WmDU">AdminForth Components Library</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Customization/websocket/"><span title="Websocket" class="linkLabel_WmDU">Websocket</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/tutorial/connectors/"><span title="Connectors" class="linkLabel_WmDU">Connectors</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/tutorial/deploy/"><span title="Deploy in Docker" class="linkLabel_WmDU">Deploy in Docker</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist" href="/docs/tutorial/ListOfAdapters/"><span title="Adapters" class="categoryLinkLabel_W154">Adapters</span></a><button aria-label="Expand sidebar category 'Adapters'" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/tutorial/CLICommands/"><span title="CLI Commands" class="linkLabel_WmDU">CLI Commands</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/tutorial/UsageOfLogger/"><span title="Usage of the logger" class="linkLabel_WmDU">Usage of the logger</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--active" href="/docs/tutorial/ListOfPlugins/"><span title="Plugins" class="categoryLinkLabel_W154">Plugins</span></a><button aria-label="Collapse sidebar category 'Plugins'" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/agent/"><span title="Agent" class="linkLabel_WmDU">Agent</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/two-factors-auth/"><span title="Two-Factor Authentication Plugin" class="linkLabel_WmDU">Two-Factor Authentication Plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/foreign-inline-list/"><span title="Foreign Inline List" class="linkLabel_WmDU">Foreign Inline List</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/audit-log/"><span title="Audit Log" class="linkLabel_WmDU">Audit Log</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/markdown/"><span title="Markdown" class="linkLabel_WmDU">Markdown</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/email-password-reset/"><span title="Email Password Reset" class="linkLabel_WmDU">Email Password Reset</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/import-export/"><span title="Import Export" class="linkLabel_WmDU">Import Export</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/open-signup/"><span title="Open Signup" class="linkLabel_WmDU">Open Signup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/i18n/"><span title="Internationalization (i18n)" class="linkLabel_WmDU">Internationalization (i18n)</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/tutorial/Plugins/oauth/"><span title="OAuth Authentication" class="linkLabel_WmDU">OAuth Authentication</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/inline-create/"><span title="Inline Create" class="linkLabel_WmDU">Inline Create</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/list-in-place-edit/"><span title="List In-Place Edit" class="linkLabel_WmDU">List In-Place Edit</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/text-complete/"><span title="Text Complete" class="linkLabel_WmDU">Text Complete</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/foreign-inline-show/"><span title="Foreign Inline Show" class="linkLabel_WmDU">Foreign Inline Show</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/email-invite/"><span title="Email Invite" class="linkLabel_WmDU">Email Invite</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/bulk-ai-flow/"><span title="Bulk AI Flow" class="linkLabel_WmDU">Bulk AI Flow</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/universal-search/"><span title="Universal Search (Legacy)" class="linkLabel_WmDU">Universal Search (Legacy)</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/login-captcha/"><span title="Login Captcha" class="linkLabel_WmDU">Login Captcha</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/user-soft-delete/"><span title="User Soft Delete" class="linkLabel_WmDU">User Soft Delete</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/clone-row/"><span title="Clone Row" class="linkLabel_WmDU">Clone Row</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/many2many/"><span title="Many to Many" class="linkLabel_WmDU">Many to Many</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/background-jobs/"><span title="Background Jobs" class="linkLabel_WmDU">Background Jobs</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/quick-filters/"><span title="Quick Filters" class="linkLabel_WmDU">Quick Filters</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/auto-remove/"><span title="Auto Remove Plugin" class="linkLabel_WmDU">Auto Remove Plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/rich-editor/"><span title="Rich Editor" class="linkLabel_WmDU">Rich Editor</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/CRUDApprove/"><span title="CRUD Approve Plugin" class="linkLabel_WmDU">CRUD Approve Plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/json-form/"><span title="JSON Form" class="linkLabel_WmDU">JSON Form</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/upload/"><span title="Upload" class="linkLabel_WmDU">Upload</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/05-1-upload-api/"><span title="Upload API" class="linkLabel_WmDU">Upload API</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/dashboard/"><span title="Dashboard plugin" class="linkLabel_WmDU">Dashboard plugin</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Plugins/dashboard-reference/"><span title="Dashboard Query Reference" class="linkLabel_WmDU">Dashboard Query Reference</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/docs/tutorial/Advanced/plugin-development/"><span title="Advanced" class="categoryLinkLabel_W154">Advanced</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Advanced/plugin-development/"><span title="Plugin development guide" class="linkLabel_WmDU">Plugin development guide</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/tutorial/Advanced/working-without-direct-database-connection/"><span title="Working without direct database connection" class="linkLabel_WmDU">Working without direct database connection</span></a></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/docs/tutorial/ListOfPlugins/"><span>Plugins</span></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">OAuth Authentication</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>OAuth Authentication</h1></header>
<p>The OAuth plugin enables OAuth2 sign-in and connected external accounts in AdminForth. Users can sign in with Google, GitHub, Facebook, Telegram, or another OAuth2 provider. Logged-in users can also connect additional provider accounts from <strong>Settings -> Connected Accounts</strong>.</p>
<p>OAuth should be configured with an external identities resource. That resource stores stable provider identity data (<code>provider</code>, <code>subject</code>) and optional profile fields. Agent chat surfaces use the same connected accounts to resolve Telegram, Slack, Teams, or other external chat users.</p>
<div class="theme-admonition theme-admonition-warning admonition_xJq3 alert alert--warning"><div class="admonitionHeading_Gvgb"><span class="admonitionIcon_Rf37"><svg viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg></span>warning</div><div class="admonitionContent_BuS1"><p>Using OAuth without <code>externalIdentityResource</code> is deprecated. Configure an external identities resource for new projects.</p></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="installation">Installation<a href="#installation" class="hash-link" aria-label="Direct link to Installation" title="Direct link to Installation" translate="no"></a></h2>
<p>Install the plugin and at least one OAuth adapter:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#e6db74">add</span><span class="token plain"> @adminforth/oauth </span><span class="token parameter variable" style="color:#f8f8f2">--save</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#e6db74">add</span><span class="token plain"> @adminforth/oauth-adapter-google </span><span class="token parameter variable" style="color:#f8f8f2">--save</span><br></span></code></pre></div></div>
<p>If you want Agent chat surfaces, install the OAuth adapter for the same provider as the chat surface. For example, Telegram chat surface support requires both:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#e6db74">add</span><span class="token plain"> @adminforth/chat-surface-adapter-telegram </span><span class="token parameter variable" style="color:#f8f8f2">--save</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#e6db74">add</span><span class="token plain"> @adminforth/oauth-adapter-telegram </span><span class="token parameter variable" style="color:#f8f8f2">--save</span><br></span></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="external-identities-resource">External Identities Resource<a href="#external-identities-resource" class="hash-link" aria-label="Direct link to External Identities Resource" title="Direct link to External Identities Resource" translate="no"></a></h2>
<p>Create a resource that stores connected OAuth accounts. The default field names are:</p>
<ul>
<li class=""><code>adminUserId</code> — links the external identity to the AdminForth user</li>
<li class=""><code>provider</code> — adapter class name, for example <code>AdminForthAdapterGoogleOauth2</code></li>
<li class=""><code>subject</code> — stable provider account id</li>
<li class=""><code>externalUserId</code> — chat-specific user id, such as Telegram ID, Slack ID, or Teams ID</li>
</ul>
<p>The defaults can be overridden in plugin options when your schema uses different field names.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="migration-example-prisma">Migration example (Prisma)<a href="#migration-example-prisma" class="hash-link" aria-label="Direct link to Migration example (Prisma)" title="Direct link to Migration example (Prisma)" translate="no"></a></h3>
<p>If you're using Prisma, add the model to your <code>schema.prisma</code>:</p>
<div class="language-prisma codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./schema.prisma</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-prisma codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain">model AdminUserExternalIdentity {</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> id String @id @default(uuid())</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> adminUserId String</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> provider String</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> subject String</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> externalUserId String?</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> email String?</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> phone String?</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> fullName String?</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> avatarUrl String?</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> meta Json?</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> createdAt DateTime @default(now())</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> @@unique([provider, subject])</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> @@index([adminUserId])</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">}</span><br></span></code></pre></div></div>
<p>Then create and apply the migration (example commands from <code>dev-demo</code>):</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> makemigration </span><span class="token parameter variable" style="color:#f8f8f2">--name</span><span class="token plain"> add-admin-user-external-identities </span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"> </span><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> migrate:local</span><br></span></code></pre></div></div>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminUserExternalIdentities.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">type</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForthResourceInput</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'adminforth'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> randomUUID </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'crypto'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token keyword" style="color:#66d9ef">export</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">default</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> dataSource</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'maindb'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> table</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'AdminUserExternalIdentity'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> resourceId</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'admin_user_external_identities'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> label</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'Admin User External Identities'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> columns</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'id'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> primaryKey</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token function-variable function" style="color:#e6db74">fillOnCreate</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">=></span><span class="token plain"> </span><span class="token function" style="color:#e6db74">randomUUID</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> showIn</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> create</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">false</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> edit</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">false</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'adminUserId'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> required</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'provider'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> required</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'subject'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> required</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'externalUserId'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'email'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'phone'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'fullName'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'avatarUrl'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'meta'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">JSON</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'createdAt'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">DATETIME</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token function-variable function" style="color:#e6db74">fillOnCreate</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">=></span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">Date</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token function" style="color:#e6db74">toISOString</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> showIn</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> create</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">false</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> edit</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">false</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"> satisfies AdminForthResourceInput</span><span class="token punctuation" style="color:#f8f8f2">;</span><br></span></code></pre></div></div>
<p>Then register the resource in <code>index.ts</code>:</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./index.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> adminUserExternalIdentitiesResource </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"./resources/adminUserExternalIdentities"</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForth</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> dataSources</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token operator" style="color:#66d9ef">...</span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> resources</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> apartmentsResource</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> usersResource</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> adminUserExternalIdentitiesResource</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><br></span></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="configuration">Configuration<a href="#configuration" class="hash-link" aria-label="Direct link to Configuration" title="Direct link to Configuration" translate="no"></a></h2>
<p>This example configures Google OAuth. See <a href="#oauth2-providers" class="">OAuth2 Providers</a> for provider setup details.</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> OAuthPlugin </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/oauth'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> AdminForthAdapterGoogleOauth2 </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/oauth-adapter-google'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> emailField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'email'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> externalIdentityResource</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> resourceId</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'admin_user_external_identities'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> emailField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'email'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> phoneField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'phone'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> fullNameField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'fullName'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> avatarUrlField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'avatarUrl'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> metaField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'meta'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> adapters</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForthAdapterGoogleOauth2</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientID</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">GOOGLE_CLIENT_ID</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">string</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientSecret</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">GOOGLE_CLIENT_SECRET</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">string</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><br></span></code></pre></div></div>
<p><code>adminUserIdField</code>, <code>providerField</code>, <code>subjectField</code>, and <code>externalUserIdField</code> default to <code>adminUserId</code>, <code>provider</code>, <code>subject</code>, and <code>externalUserId</code>. Configure them only when your resource uses different field names.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="google-provider-setup">Google Provider Setup<a href="#google-provider-setup" class="hash-link" aria-label="Direct link to Google Provider Setup" title="Direct link to Google Provider Setup" translate="no"></a></h3>
<ol>
<li class="">Go to the <a href="https://console.cloud.google.com" target="_blank" rel="noopener noreferrer" class="">Google Cloud Console</a> and log in.</li>
<li class="">Create a new project or select an existing one.</li>
<li class="">Go to <code>APIs & Services</code> -> <code>Credentials</code>.</li>
<li class="">Create credentials for OAuth 2.0 client IDs.</li>
<li class="">Select application type: "Web application".</li>
<li class="">Add your application's name and redirect URI.</li>
<li class="">In "Authorized redirect URIs", add <code>https://your-domain/oauth/callback</code> (for production) and <code>http://localhost:3500/oauth/callback</code>(for local, where 3500 - is your app port). Include <code>baseUrl</code> when your AdminForth app uses it, for example <code>https://your-domain/base/oauth/callback</code>.</li>
<li class="">Add the credentials to your <code>.env</code> file:</li>
</ol>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token assign-left variable" style="color:#f8f8f2">GOOGLE_CLIENT_ID</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_google_client_id</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">GOOGLE_CLIENT_SECRET</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_google_client_secret</span><br></span></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="connected-accounts">Connected Accounts<a href="#connected-accounts" class="hash-link" aria-label="Direct link to Connected Accounts" title="Direct link to Connected Accounts" translate="no"></a></h2>
<p>When <code>externalIdentityResource</code> is configured, AdminForth adds <strong>Connected Accounts</strong> to the user settings menu. A logged-in user can connect additional external accounts there. This is also how Agent chat surfaces identify external users: for example, a Telegram bot message is matched to the AdminForth user through the Telegram OAuth identity stored in the external identities resource.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="email-confirmation">Email Confirmation<a href="#email-confirmation" class="hash-link" aria-label="Direct link to Email Confirmation" title="Direct link to Email Confirmation" translate="no"></a></h2>
<p>The plugin supports automatic email confirmation for OAuth users. To enable this:</p>
<ol>
<li class="">Add the <code>email_confirmed</code> field to your database schema:</li>
</ol>
<div class="language-prisma codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./schema.prisma</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-prisma codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain">model adminuser {</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> // ... existing fields ...</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> email_confirmed Boolean @default(false)</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">}</span><br></span></code></pre></div></div>
<ol start="2">
<li class="">Run the migration:</li>
</ol>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> makemigration </span><span class="token parameter variable" style="color:#f8f8f2">--name</span><span class="token plain"> add-email-confirmed-to-adminuser </span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"> </span><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> migrate:local</span><br></span></code></pre></div></div>
<ol start="3">
<li class="">Configure the plugin with <code>emailConfirmedField</code>:</li>
</ol>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token comment" style="color:#8292a2;font-style:italic">// ... adapters configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> emailField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'email'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> emailConfirmedField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'email_confirmed'</span><span class="token plain"> </span><span class="token comment" style="color:#8292a2;font-style:italic">// Enable email confirmation tracking</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><br></span></code></pre></div></div>
<p>When using OAuth:</p>
<ul>
<li class="">New users will have their email automatically confirmed (<code>email_confirmed = true</code>)</li>
<li class="">Existing users will have their email marked as confirmed upon successful OAuth login</li>
<li class="">The <code>email_confirmed</code> field must be a boolean type</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="open-signup">Open Signup<a href="#open-signup" class="hash-link" aria-label="Direct link to Open Signup" title="Direct link to Open Signup" translate="no"></a></h2>
<p>By default, users must exist in the system before they can log in with OAuth. You can enable automatic user creation for new OAuth users with the <code>openSignup</code> option:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token comment" style="color:#8292a2;font-style:italic">// ... adapters configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> openSignup</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> enabled</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> defaultFieldValues</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> </span><span class="token comment" style="color:#8292a2;font-style:italic">// Set default values for new users</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> role</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'user'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><br></span></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="ui-customization">UI Customization<a href="#ui-customization" class="hash-link" aria-label="Direct link to UI Customization" title="Direct link to UI Customization" translate="no"></a></h2>
<p>You can customize the UI of the OAuth login buttons by using the <code>iconOnly</code> and <code>pill</code> options.</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token comment" style="color:#8292a2;font-style:italic">// ... adapters configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> iconOnly</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token comment" style="color:#8292a2;font-style:italic">// Show only provider icons without text</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> pill</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token comment" style="color:#8292a2;font-style:italic">// Use pill-shaped buttons instead of rectangular</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><br></span></code></pre></div></div>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="oauth2-providers">OAuth2 Providers<a href="#oauth2-providers" class="hash-link" aria-label="Direct link to OAuth2 Providers" title="Direct link to OAuth2 Providers" translate="no"></a></h2>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="facebook-adapter">Facebook Adapter<a href="#facebook-adapter" class="hash-link" aria-label="Direct link to Facebook Adapter" title="Direct link to Facebook Adapter" translate="no"></a></h3>
<p>Install Adapter:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain">pnpm add @adminforth/oauth-adapter-facebook --save</span><br></span></code></pre></div></div>
<ol>
<li class="">Go to the <a href="https://developers.facebook.com/" target="_blank" rel="noopener noreferrer" class="">Facebook Developers</a></li>
<li class="">Go to <code>My apps</code></li>
<li class="">Create a new project or select an existing one (choose Authenticate and request data from users with Facebook Login)</li>
<li class="">Go to <code>Use Cases</code> - <code>Authenticate and request data from users with Facebook Login</code> -> <code>Customize</code> and add email permissions</li>
<li class="">Go to <code>App Settings</code> -> <code>Basic</code></li>
<li class="">Get App ID and App secret</li>
<li class="">Add the credentials to your <code>.env</code> file:</li>
</ol>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token assign-left variable" style="color:#f8f8f2">FACEBOOK_CLIENT_ID</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_facebook_client_id</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">FACEBOOK_CLIENT_SECRET</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_facebook_client_secret</span><br></span></code></pre></div></div>
<p>Add the adapter to your plugin configuration:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> AdminForthAdapterFacebookOauth2 </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/oauth-adapter-facebook'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token comment" style="color:#8292a2;font-style:italic">// ... existing resource configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> adapters</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForthAdapte</span><span class="token plain"># OAuth </span><span class="token function" style="color:#e6db74">AuthenticationrFacebookOauth2</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientID</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">FACEBOOK_CLIENT_ID</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientSecret</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">FACEBOOK_CLIENT_SECRET</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="github-adapter">GitHub Adapter<a href="#github-adapter" class="hash-link" aria-label="Direct link to GitHub Adapter" title="Direct link to GitHub Adapter" translate="no"></a></h3>
<p>Install Adapter:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain">pnpm add @adminforth/oauth-adapter-github --save</span><br></span></code></pre></div></div>
<ol>
<li class="">Go to the <a href="https://github.com/settings/apps" target="_blank" rel="noopener noreferrer" class="">GitHub Apps</a></li>
<li class="">Create a new app or select an existing one</li>
<li class="">Go to the <code>Permisiions & events</code> -> <code>Account permissions</code> -> <code>Email addresses</code> and change to <code>Read-only</code></li>
<li class="">Go to the <code>General</code> and click to <code>Generate a new client secret</code> button and copy secret</li>
<li class="">Add the credentials to your <code>.env</code> file:</li>
</ol>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token assign-left variable" style="color:#f8f8f2">GITHUB_CLIENT_ID</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_github_client_id</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">GITHUB_CLIENT_SECRET</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_github_client_secret</span><br></span></code></pre></div></div>
<p>Add the adapter to your plugin configuration:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> AdminForthAdapterGithubOauth2 </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/oauth-adapter-github'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token comment" style="color:#8292a2;font-style:italic">// ... existing resource configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> adapters</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForthAdapterGithubOauth2</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientID</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">GITHUB_CLIENT_ID</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientSecret</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">GITHUB_CLIENT_SECRET</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="telegram-adapter">Telegram Adapter<a href="#telegram-adapter" class="hash-link" aria-label="Direct link to Telegram Adapter" title="Direct link to Telegram Adapter" translate="no"></a></h3>
<p>Install Adapter:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain">pnpm add @adminforth/oauth-adapter-telegram --save</span><br></span></code></pre></div></div>
<p>Create Telegram OpenID Connect credentials in BotFather:</p>
<ol>
<li class="">Open <a href="https://t.me/BotFather" target="_blank" rel="noopener noreferrer" class="">BotFather</a>.</li>
<li class="">Click <strong>Open</strong> and open it in the Telegram app.</li>
<li class="">Select or Create your bot.</li>
<li class="">Open <strong>Login Widget</strong>.</li>
<li class="">Click <strong>Switch to OpenID Connect Login</strong>.</li>
<li class="">Copy the client ID and client secret shown at the top.</li>
<li class="">Set <strong>Redirect URI</strong> to <code>https://example.com/oauth/callback</code>.</li>
</ol>
<p>Add the credentials to your <code>.env</code> file:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token assign-left variable" style="color:#f8f8f2">TELEGRAM_CLIENT_ID</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_telegram_client_id</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">TELEGRAM_CLIENT_SECRET</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_telegram_client_secret</span><br></span></code></pre></div></div>
<p>Add the adapter to your plugin configuration:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> AdminForthAdapterTelegramOauth2 </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/oauth-adapter-telegram'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token comment" style="color:#8292a2;font-style:italic">// ... existing resource configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> adapters</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">TelegramOauthAdapter</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientID</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">TELEGRAM_CLIENT_ID</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">string</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientSecret</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">TELEGRAM_CLIENT_SECRET</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">string</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> redirectUri</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'https://example.com/oauth/callback'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> scopes</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token string" style="color:#a6e22e">'openid'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'profile'</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'phone'</span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><br></span></code></pre></div></div>
<p>Register the same <code>redirectUri</code> in BotFather under <strong>Login Widget → Redirect URI</strong>.</p>
<p>If you use <code>@adminforth/chat-surface-adapter-telegram</code>, users must connect Telegram from <strong>Settings → Connected Accounts</strong> before the Telegram bot can identify them.</p>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="keycloak-adapter">Keycloak Adapter<a href="#keycloak-adapter" class="hash-link" aria-label="Direct link to Keycloak Adapter" title="Direct link to Keycloak Adapter" translate="no"></a></h3>
<p>Install Adapter:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain">pnpm add @adminforth/oauth-adapter-keycloak --save</span><br></span></code></pre></div></div>
<p>If you need a basic Keycloak setup which tested with AdminForth, you can follow <a class="" href="/blog/keycloak-setup-example/">this minimal KeyClock setup example</a>.</p>
<ol>
<li class="">Update your <code>.env</code> file with the following Keycloak configuration:</li>
</ol>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token assign-left variable" style="color:#f8f8f2">KEYCLOAK_CLIENT_ID</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_keycloak_client_id</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">KEYCLOAK_CLIENT_SECRET</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_keycloak_client_secret</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">KEYCLOAK_URL</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">http://localhost:8080</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">KEYCLOAK_REALM</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_keycloak_realm</span><br></span></code></pre></div></div>
<ol start="2">
<li class="">Add the adapter to your plugin configuration:</li>
</ol>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> AdminForthAdapterKeycloakOauth2 </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/oauth-adapter-keycloak'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token comment" style="color:#8292a2;font-style:italic">// ... existing resource configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> adapters</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForthAdapterKeycloakOauth2</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"Keycloak"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientID</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">KEYCLOAK_CLIENT_ID</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientSecret</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">KEYCLOAK_CLIENT_SECRET</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> keycloakUrl</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">KEYCLOAK_URL</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> realm</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">KEYCLOAK_REALM</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> useOpenIdConnect</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="microsoft-adapter">Microsoft Adapter<a href="#microsoft-adapter" class="hash-link" aria-label="Direct link to Microsoft Adapter" title="Direct link to Microsoft Adapter" translate="no"></a></h3>
<p>Install Adapter:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain">pnpm add @adminforth/oauth-adapter-microsoft --save</span><br></span></code></pre></div></div>
<ol>
<li class="">In the Microsoft <a href="https://portal.azure.com/" target="_blank" rel="noopener noreferrer" class="">Azure Portal</a>, search for and click <a href="https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationsListBlade" target="_blank" rel="noopener noreferrer" class="">App registrations</a>, then <code>New registration</code>.</li>
<li class="">Give your application a name. This name will be visible to your users.</li>
<li class="">Set the audience for the app to <code>Accounts in my organizational directory and personal Microsoft accounts</code>. This allows your user to log in using any Microsoft account.</li>
<li class="">Set the Redirect URI platform to Web and enter your project's redirect URI.</li>
<li class="">Go to your app and search <code>API permissions</code>, click <code>Add a permission</code>, select <code>Microsoft Graph</code>, select <code>Delegated permissions</code>, enable permissions: <code>offline_access</code>, <code>openid</code>, <code>profile</code>, <code>User.Read</code>, click <code>Add permissions</code>.</li>
<li class="">Serch <code>Certificates & secrets</code>, click <code>New client secret</code> and create client secret.</li>
<li class="">Get Application ID and Client Secret.</li>
<li class="">Add the credentials to your <code>.env</code> file:</li>
</ol>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token assign-left variable" style="color:#f8f8f2">MICROSOFT_CLIENT_ID</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_application_id</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">MICROSOFT_CLIENT_SECRET</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_microsoft_client_secret</span><br></span></code></pre></div></div>
<p>Add the adapter to your plugin configuration:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> AdminForthAdapterMicrosoftOauth2 </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/oauth-adapter-microsoft'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token comment" style="color:#8292a2;font-style:italic">// ... existing resource configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> adapters</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForthAdapterMicrosoftOauth2</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientID</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">MICROSOFT_CLIENT_ID</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientSecret</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">MICROSOFT_CLIENT_SECRET</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> useOpenIdConnect</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="twitch-adapter">Twitch Adapter<a href="#twitch-adapter" class="hash-link" aria-label="Direct link to Twitch Adapter" title="Direct link to Twitch Adapter" translate="no"></a></h3>
<p>Install Adapter:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain">pnpm add @adminforth/oauth-adapter-twitch --save</span><br></span></code></pre></div></div>
<ol>
<li class="">Go to the <a href="https://dev.twitch.tv/console/" target="_blank" rel="noopener noreferrer" class="">Twitch dashboard</a></li>
<li class="">Create a new app or select an existing one</li>
<li class="">In <code>OAuth Redirect URLs</code> add <code>https://your-domain/oauth/callback</code> (<code>http://localhost:3500/oauth/callback</code>)</li>
<li class="">Go to the app and copy <code>Client ID</code>, click to <code>Generate a new client secret</code>(in Twitch this button can be used only once for some time, becouse of this dont lose it) button and copy secret .</li>
<li class="">Add the credentials to your <code>.env</code> file:</li>
</ol>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token assign-left variable" style="color:#f8f8f2">TWITCH_CLIENT_ID</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_twitch_client_id</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">TWITCH_CLIENT_SECRET</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_twitch_client_secret</span><br></span></code></pre></div></div>
<p>Add the adapter to your plugin configuration:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> AdminForthAdapterTwitchOauth2 </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/oauth-adapter-twitch'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token comment" style="color:#8292a2;font-style:italic">// ... existing resource configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> adapters</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForthAdapterTwitchOauth2</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientID</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">TWITCH_CLIENT_ID</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientSecret</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">TWITCH_CLIENT_SECRET</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="clerk-adapter">Clerk Adapter<a href="#clerk-adapter" class="hash-link" aria-label="Direct link to Clerk Adapter" title="Direct link to Clerk Adapter" translate="no"></a></h3>
<p>Install Adapter:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> </span><span class="token function" style="color:#e6db74">add</span><span class="token plain"> @adminforth/oauth-adapter-clerk </span><span class="token parameter variable" style="color:#f8f8f2">--save</span><br></span></code></pre></div></div>
<ol>
<li class="">Go to the <a href="https://dashboard.clerk.com" target="_blank" rel="noopener noreferrer" class="">Clerk Dashboard</a> and open your application.</li>
<li class="">In the left sidebar, go to <strong>Configure</strong> → <strong>Developers</strong> → <strong>OAuth Applications</strong>.</li>
<li class="">Click <strong>Add OAuth Application</strong> and give it a name.</li>
<li class="">Copy the <strong>Client Secret</strong> from the OAuth application creation modal.</li>
<li class="">After copying, Clerk redirects you to the application page, where you can copy the <strong>Client ID</strong> and <strong>Domain</strong>.</li>
<li class="">Add the credentials to your <code>.env</code> file:</li>
<li class="">In <strong>Redirect URLs</strong>, add <code>https://your-domain/oauth/callback</code> and <code>http://localhost:3500/oauth/callback</code>. Include <code>baseUrl</code> when your AdminForth app uses it, for example <code>https://your-domain/base/oauth/callback</code>.</li>
<li class="">In <strong>Scopes</strong>, check the <strong>openid</strong> checkbox.</li>
</ol>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token assign-left variable" style="color:#f8f8f2">CLERK_CLIENT_ID</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_clerk_client_id</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">CLERK_CLIENT_SECRET</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">your_clerk_client_secret</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token assign-left variable" style="color:#f8f8f2">CLERK_DOMAIN</span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain">https://your-app.clerk.accounts.dev</span><br></span></code></pre></div></div>
<p>Add the adapter to your plugin configuration:</p>
<div class="language-typescript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-typescript codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> AdminForthAdapterClerkOauth2 </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/oauth-adapter-clerk'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token comment" style="color:#8292a2;font-style:italic">// ... existing resource configuration ...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> adapters</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForthAdapterClerkOauth2</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientID</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">CLERK_CLIENT_ID</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">string</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> clientSecret</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">CLERK_CLIENT_SECRET</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">string</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> domain</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">CLERK_DOMAIN</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">string</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><br></span></code></pre></div></div>
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="need-custom-provider">Need custom provider?<a href="#need-custom-provider" class="hash-link" aria-label="Direct link to Need custom provider?" title="Direct link to Need custom provider?" translate="no"></a></h3>
<p>Just fork any existing adapter e.g. <a href="https://github.com/devforth/adminforth-oauth-adapter-google" target="_blank" rel="noopener noreferrer" class="">Google</a> and adjust it to your needs.</p>
<p>This is really easy, you have to change less then 10 lines of code in this <a href="https://github.com/devforth/adminforth-oauth-adapter-google/blob/main/index.ts" target="_blank" rel="noopener noreferrer" class="">file</a></p>
<p>Then just publish it to npm and install it in your project.</p>
<p>Links to adapters:
<a href="https://github.com/devforth/adminforth-oauth-adapter-google" target="_blank" rel="noopener noreferrer" class="">Google</a>
<a href="https://github.com/devforth/adminforth-oauth-adapter-github" target="_blank" rel="noopener noreferrer" class="">GitHub</a>
<a href="https://github.com/devforth/adminforth-oauth-adapter-facebook" target="_blank" rel="noopener noreferrer" class="">Facebook</a>
<a href="https://github.com/devforth/adminforth-oauth-adapter-keycloak" target="_blank" rel="noopener noreferrer" class="">Keycloak</a></p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="starting-oauth-flow-from-an-external-page">Starting OAuth flow from an external page<a href="#starting-oauth-flow-from-an-external-page" class="hash-link" aria-label="Direct link to Starting OAuth flow from an external page" title="Direct link to Starting OAuth flow from an external page" translate="no"></a></h2>
<p>If you have an external website with a "Sign in" button that should open the AdminForth OAuth flow directly — without showing the login form first — use the <code>start_oauth</code> query parameter:</p>
<div class="language-text codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-text codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain">https://your-admin.example.com/login?start_oauth=google</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">https://your-admin.example.com/login?start_oauth=clerk</span><br></span></code></pre></div></div>
<p>The value must match the provider name (case-insensitive). AdminForth will immediately redirect the user to the OAuth provider, skipping the login page entirely.</p>
<p>The provider name is derived from the adapter class name — for example <code>AdminForthAdapterOauth2Google</code> → <code>google</code>, <code>AdminForthAdapterOauth2Clerk</code> → <code>clerk</code>.</p>
<p>If the specified provider is not found, an error toast is shown on the login page. If <code>start_oauth</code> is provided without a value (<code>?start_oauth</code>), nothing happens and the regular login form is displayed.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="fill-user-full-name">Fill user full name<a href="#fill-user-full-name" class="hash-link" aria-label="Direct link to Fill user full name" title="Direct link to Fill user full name" translate="no"></a></h2>
<p>If you have a fullName field in your users resource, you can add it to the plugin setup:</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> userFullNameField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'fullName'</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span></code></pre></div></div>
<p>This field will be automatically filled with the name that the provider returns, if this field was empty.</p>
<blockquote>
<p>☝️Not all providers return full name or even if they do, there is no guarantee that they will be correct</p>
</blockquote>
<blockquote>
<p>Google Adapter: returns fullName, but if there is no last name - it will return only first name</p>
</blockquote>
<blockquote>
<p>Facebook: returns fullName</p>
</blockquote>
<blockquote>
<p>Github: returns name or fullName (depends of what user added in name field)</p>
</blockquote>
<blockquote>
<p>Keycloak: returns fullName</p>
</blockquote>
<blockquote>
<p>Microsoft: returns fullName</p>
</blockquote>
<blockquote>
<p>Twitch: return only users display name</p>
</blockquote>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="automatically-save-users-avatar">Automatically save users avatar<a href="#automatically-save-users-avatar" class="hash-link" aria-label="Direct link to Automatically save users avatar" title="Direct link to Automatically save users avatar" translate="no"></a></h2>
<p>If you want to automatically upload users avatar from the provider, you can use userAvatarField prop.</p>
<p>Example:</p>
<p>First of all you'll need to create avatar field in your database:</p>
<p>Update schema prisma file:</p>
<div class="language-title="./schema.prisma" codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-title="./schema.prisma" codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">model adminuser {</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> id String @id</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> email String @unique</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> password_hash String</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> role String</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> created_at DateTime</span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> avatar String </span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">}</span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span></code></pre></div></div>
<p>And make migration:</p>
<div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> makemigration </span><span class="token parameter variable" style="color:#f8f8f2">--name</span><span class="token plain"> add-avatar-field </span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"> </span><span class="token function" style="color:#e6db74">pnpm</span><span class="token plain"> migrate:local</span><br></span></code></pre></div></div>
<p>Then add this field to users resource and install upload plugin:</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token keyword" style="color:#66d9ef">import</span><span class="token plain"> UploadPlugin </span><span class="token keyword" style="color:#66d9ef">from</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'@adminforth/upload'</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">columns</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> name</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"avatar"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> type</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> AdminForthDataTypes</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">STRING</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> showIn</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> list</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> show</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ae81ff">true</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">UploadPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> pathColumnName</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"avatar"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> storageAdapter</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">AdminForthAdapterS3Storage</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> bucket</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">AWS_BUCKET_NAME</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> region</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">AWS_REGION</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> accessKeyId</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">AWS_ACCESS_KEY_ID</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">string</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> secretAccessKey</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> process</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">env</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token constant" style="color:#e6db74">AWS_SECRET_ACCESS_KEY</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">string</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> allowedFileExtensions</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"jpg"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"jpeg"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"png"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"gif"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"webm"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"exe"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"webp"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> maxFileSize</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token number" style="color:#ae81ff">1024</span><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">*</span><span class="token plain"> </span><span class="token number" style="color:#ae81ff">1024</span><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">*</span><span class="token plain"> </span><span class="token number" style="color:#ae81ff">20</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token comment" style="color:#8292a2;font-style:italic">// 20MB</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token function-variable function" style="color:#e6db74">filePath</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"> originalFilename</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> originalExtension</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> contentType</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> record </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">return</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#a6e22e">`</span><span class="token template-string string" style="color:#a6e22e">aparts/</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#f8f8f2">${</span><span class="token template-string interpolation keyword" style="color:#66d9ef">new</span><span class="token template-string interpolation"> </span><span class="token template-string interpolation class-name" style="color:#e6db74">Date</span><span class="token template-string interpolation punctuation" style="color:#f8f8f2">(</span><span class="token template-string interpolation punctuation" style="color:#f8f8f2">)</span><span class="token template-string interpolation punctuation" style="color:#f8f8f2">.</span><span class="token template-string interpolation function" style="color:#e6db74">getFullYear</span><span class="token template-string interpolation punctuation" style="color:#f8f8f2">(</span><span class="token template-string interpolation punctuation" style="color:#f8f8f2">)</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#f8f8f2">}</span><span class="token template-string string" style="color:#a6e22e">/</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#f8f8f2">${</span><span class="token template-string interpolation">originalFilename</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#f8f8f2">}</span><span class="token template-string string" style="color:#a6e22e">.</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#f8f8f2">${</span><span class="token template-string interpolation">originalExtension</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#f8f8f2">}</span><span class="token template-string template-punctuation string" style="color:#a6e22e">`</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> preview</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> maxWidth</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"200px"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span></code></pre></div></div>
<p>Then update your plugin setup:</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./resources/adminuser.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain">plugins</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">[</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">OAuthPlugin</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> userAvatarField</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">"avatar"</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token punctuation" style="color:#f8f8f2">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"></span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span></code></pre></div></div>
<p>And finally add this callback:</p>
<div class="language-ts codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#f8f8f2;--prism-background-color:#272822"><div class="codeBlockTitle_OeMC">./index.ts</div><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-ts codeBlock_bY9V thin-scrollbar" style="color:#f8f8f2;background-color:#272822"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> auth</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token function-variable function" style="color:#e6db74">avatarUrl</span><span class="token operator" style="color:#66d9ef">:</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">async</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token plain">adminUser</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token operator" style="color:#66d9ef">=></span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">const</span><span class="token plain"> plugin </span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain"> admin</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token function" style="color:#e6db74">getPluginsByClassName</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token string" style="color:#a6e22e">'UploadPlugin'</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token function" style="color:#e6db74">find</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token plain">p </span><span class="token operator" style="color:#66d9ef">=></span><span class="token plain"> p</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">pluginOptions</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">pathColumnName </span><span class="token operator" style="color:#66d9ef">===</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">'avatar'</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">as</span><span class="token plain"> </span><span class="token builtin" style="color:#e6db74">any</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"> </span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token operator" style="color:#66d9ef">!</span><span class="token plain">plugin</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">new</span><span class="token plain"> </span><span class="token class-name" style="color:#e6db74">Error</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token string" style="color:#a6e22e">'Upload plugin for avatar not found'</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token plain">adminUser</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">dbUser</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">avatar </span><span class="token operator" style="color:#66d9ef">===</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">null</span><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">||</span><span class="token plain"> adminUser</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">dbUser</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">avatar </span><span class="token operator" style="color:#66d9ef">===</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">undefined</span><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">||</span><span class="token plain"> adminUser</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">dbUser</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">avatar </span><span class="token operator" style="color:#66d9ef">===</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">''</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">{</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">return</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">undefined</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">const</span><span class="token plain"> imageUrl </span><span class="token operator" style="color:#66d9ef">=</span><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">await</span><span class="token plain"> plugin</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token function" style="color:#e6db74">getFileDownloadUrl</span><span class="token punctuation" style="color:#f8f8f2">(</span><span class="token plain">adminUser</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">dbUser</span><span class="token punctuation" style="color:#f8f8f2">.</span><span class="token plain">avatar </span><span class="token operator" style="color:#66d9ef">||</span><span class="token plain"> </span><span class="token string" style="color:#a6e22e">''</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"> </span><span class="token number" style="color:#ae81ff">3600</span><span class="token punctuation" style="color:#f8f8f2">)</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token keyword" style="color:#66d9ef">return</span><span class="token plain"> imageUrl</span><span class="token punctuation" style="color:#f8f8f2">;</span><span class="token plain"></span><br></span><span class="token-line code-block-diff-add-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token punctuation" style="color:#f8f8f2">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token operator" style="color:#66d9ef">...</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain"> </span><span class="token punctuation" style="color:#f8f8f2">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#f8f8f2"><span class="token plain" style="display:inline-block"></span><br></span></code></pre></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"></div><div class="col lastUpdated_JAkA"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2026-08-17T05:01:16.000Z" itemprop="dateModified">Aug 17, 2026</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/docs/tutorial/Plugins/i18n/"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Internationalization (i18n)</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/docs/tutorial/Plugins/inline-create/"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Inline Create</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#installation" class="table-of-contents__link toc-highlight">Installation</a></li><li><a href="#external-identities-resource" class="table-of-contents__link toc-highlight">External Identities Resource</a><ul><li><a href="#migration-example-prisma" class="table-of-contents__link toc-highlight">Migration example (Prisma)</a></li></ul></li><li><a href="#configuration" class="table-of-contents__link toc-highlight">Configuration</a><ul><li><a href="#google-provider-setup" class="table-of-contents__link toc-highlight">Google Provider Setup</a></li></ul></li><li><a href="#connected-accounts" class="table-of-contents__link toc-highlight">Connected Accounts</a></li><li><a href="#email-confirmation" class="table-of-contents__link toc-highlight">Email Confirmation</a></li><li><a href="#open-signup" class="table-of-contents__link toc-highlight">Open Signup</a></li><li><a href="#ui-customization" class="table-of-contents__link toc-highlight">UI Customization</a></li><li><a href="#oauth2-providers" class="table-of-contents__link toc-highlight">OAuth2 Providers</a><ul><li><a href="#facebook-adapter" class="table-of-contents__link toc-highlight">Facebook Adapter</a></li><li><a href="#github-adapter" class="table-of-contents__link toc-highlight">GitHub Adapter</a></li><li><a href="#telegram-adapter" class="table-of-contents__link toc-highlight">Telegram Adapter</a></li><li><a href="#keycloak-adapter" class="table-of-contents__link toc-highlight">Keycloak Adapter</a></li><li><a href="#microsoft-adapter" class="table-of-contents__link toc-highlight">Microsoft Adapter</a></li><li><a href="#twitch-adapter" class="table-of-contents__link toc-highlight">Twitch Adapter</a></li><li><a href="#clerk-adapter" class="table-of-contents__link toc-highlight">Clerk Adapter</a></li><li><a href="#need-custom-provider" class="table-of-contents__link toc-highlight">Need custom provider?</a></li></ul></li><li><a href="#starting-oauth-flow-from-an-external-page" class="table-of-contents__link toc-highlight">Starting OAuth flow from an external page</a></li><li><a href="#fill-user-full-name" class="table-of-contents__link toc-highlight">Fill user full name</a></li><li><a href="#automatically-save-users-avatar" class="table-of-contents__link toc-highlight">Automatically save users avatar</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial/gettingStarted/">Tutorial</a></li><li class="footer__item"><a href="https://demo.adminforth.dev/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Live Demo</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/">API</a></li><li class="footer__item"><a class="footer__link-item" href="/blog/archive/">Blog Archive</a></li><li class="footer__item"><a class="footer__link-item" href="/search/">Find anything</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://devforth.io" target="_blank" rel="noopener noreferrer" class="footer__link-item">DevForth.io<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://devforth.io/contact" target="_blank" rel="noopener noreferrer" class="footer__link-item">We can develop admin panel for your project<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/devforth/adminforth" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Devforth sp. z o.o.</div></div></div></footer></div>
</body>
</html>