From f6287ef58679347e8d64c54d9589e66dffed613f Mon Sep 17 00:00:00 2001
From: Wanjohi <71614375+wanjohiryan@users.noreply.github.com>
Date: Tue, 7 Jan 2025 23:58:27 +0300
Subject: [PATCH] =?UTF-8?q?=E2=AD=90feat(auth):=20Update=20the=20authentic?=
 =?UTF-8?q?ation=20UI=20(#153)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We added a new Auth UI, with all the business logic to handle profiles and such... it works alright
---
 apps/docs/sst-env.d.ts                        |  16 +
 .../(auth)/{login => login-test}/index.tsx    |   2 +-
 apps/www/sst-env.d.ts                         |  16 +
 bun.lockb                                     | Bin 741440 -> 744240 bytes
 infra/api.ts                                  |   8 +-
 infra/secrets.ts                              |   6 +-
 packages/core/instant.schema.ts               |  12 +
 packages/core/package.json                    |   2 +-
 packages/core/src/examples.ts                 |   9 +
 packages/core/src/machine/index.ts            |   2 +-
 packages/core/src/profile/index.ts            | 232 +++++++
 packages/core/sst-env.d.ts                    |  16 +
 packages/functions/src/auth.ts                | 111 +++-
 packages/functions/src/ui/adapters/discord.ts |  12 +
 packages/functions/src/ui/adapters/github.ts  |  12 +
 packages/functions/src/ui/adapters/oauth2.tsx | 137 ++++
 .../functions/src/ui/adapters/password.ts     | 441 +++++++++++++
 packages/functions/src/ui/base.tsx            | 279 +++++++++
 packages/functions/src/ui/css.ts              | 586 ++++++++++++++++++
 packages/functions/src/ui/password.tsx        | 481 ++++++++++++++
 packages/functions/src/ui/select.tsx          | 122 ++++
 packages/functions/src/utils.ts               |  75 +++
 packages/functions/sst-env.d.ts               |  16 +
 packages/functions/tsconfig.json              |  10 +-
 packages/input/sst-env.d.ts                   |  16 +
 packages/moq/sst-env.d.ts                     |  16 +
 packages/ui/sst-env.d.ts                      |  16 +
 sst-env.d.ts                                  |  16 +
 28 files changed, 2639 insertions(+), 28 deletions(-)
 rename apps/www/src/routes/(auth)/{login => login-test}/index.tsx (97%)
 create mode 100644 packages/core/src/profile/index.ts
 create mode 100644 packages/functions/src/ui/adapters/discord.ts
 create mode 100644 packages/functions/src/ui/adapters/github.ts
 create mode 100644 packages/functions/src/ui/adapters/oauth2.tsx
 create mode 100644 packages/functions/src/ui/adapters/password.ts
 create mode 100644 packages/functions/src/ui/base.tsx
 create mode 100644 packages/functions/src/ui/css.ts
 create mode 100644 packages/functions/src/ui/password.tsx
 create mode 100644 packages/functions/src/ui/select.tsx
 create mode 100644 packages/functions/src/utils.ts

diff --git a/apps/docs/sst-env.d.ts b/apps/docs/sst-env.d.ts
index f90ea1f4..002938bb 100644
--- a/apps/docs/sst-env.d.ts
+++ b/apps/docs/sst-env.d.ts
@@ -21,6 +21,22 @@ declare module "sst" {
     "CloudflareAuthKV": {
       "type": "sst.cloudflare.Kv"
     }
+    "DiscordClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "DiscordClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "InstantAdminToken": {
       "type": "sst.sst.Secret"
       "value": string
diff --git a/apps/www/src/routes/(auth)/login/index.tsx b/apps/www/src/routes/(auth)/login-test/index.tsx
similarity index 97%
rename from apps/www/src/routes/(auth)/login/index.tsx
rename to apps/www/src/routes/(auth)/login-test/index.tsx
index cb615a80..1b606cc1 100644
--- a/apps/www/src/routes/(auth)/login/index.tsx
+++ b/apps/www/src/routes/(auth)/login-test/index.tsx
@@ -27,7 +27,7 @@ export default component$(() => {
             issuer: "https://auth.lauryn.dev.nestri.io"
         })
 
-        const { url } = await client.authorize("http://localhost:5173/login", "token", { pkce: true })
+        const { url } = await client.authorize("http://localhost:5173/login-test", "token", { pkce: true })
         window.location.href = url
     })
     
diff --git a/apps/www/sst-env.d.ts b/apps/www/sst-env.d.ts
index f90ea1f4..002938bb 100644
--- a/apps/www/sst-env.d.ts
+++ b/apps/www/sst-env.d.ts
@@ -21,6 +21,22 @@ declare module "sst" {
     "CloudflareAuthKV": {
       "type": "sst.cloudflare.Kv"
     }
+    "DiscordClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "DiscordClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "InstantAdminToken": {
       "type": "sst.sst.Secret"
       "value": string
diff --git a/bun.lockb b/bun.lockb
index 429e52710f8147cf7ece7c7ed49e95e8a920c42c..25e22184df348754ecbbd6d71eb0e2713da6ac2d 100755
GIT binary patch
delta 22178
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
ON$A|BYG7@TKmG>_Oa0*h

delta 20936
zcmeI4d3;UR_xH~|?#;a?142Yd5Ml_D$VAdo)Kn$L8e2tbsCg=CzCqPoBG_uC<~cRQ
z)S{@lrcyCPVvHDLjQRO|?p+tp@A-beujhIG{_a=SU2DD1+QZprpS{mL_vCEY61sa~
z=+v;Xi>k#A>7BXzLGSXN{F+{{{XAmQpexpg9f$Tf|58op_u$xuMjo0YCAKW4C)`dR
zlo{nUrL9Q|)U<?;+nKZ?N%NxpOKh{~T3!&Vo37=79x$M5N9O7|pnrV-t^+%*vm~95
zu4JDtVb@NXwEPI$23-KUso~7FT=aKc;`{YM_U9hD=7a6mpc!`>+8g?=r!#&Bd_VZ1
z&}`5m=)%w*&?TTJLo@$<cU=q6G<(AL0KNbx0g6J$i@#C)29iNJGb9XwE`qqPpo>A*
zfo4N0Ko^AW(7Q+PerV{Oe7fcdKQ_Ov<%Z7gX424a33ahU?$Dn=duVpF#K&2X*JzXG
zg$>u?Gr;7lYlWbXK(oSn1)U8%2hBZ>MjZ7~_^c=yaop3H(EiX}3psnB7vi{M{lVD-
zj|w;&6z-3numco@kq<f@ngv*(S@8vF$X1)lQNcm@JVYCy*~O=dIJ>+|Q74}#+y5s&
zi|uUCBy4Ac<G<_QuWPSwwbt-`*>$yH@R+Q`vFDJ<v?Y~@2`l_rkh3EUXl~9dp=-sV
z&y+~&7E{!Iw<J4IO9*(ZIf~7I&wdyf-=pg{z58nkrFBPtcIw=@Q-}VVR-=rwxbe^i
z;^O;t??1RtC(S$9S&j{wye;zaKvsulb3>uI+rGlzmU3*bnQ#jRN6slHNZ1X{e(cbr
zcdt$u0nN+nS`d8C5NAL2iSO5caQCkLH)0$6cX>!sz1XUS52M{Y-VZA{>p$|D=Gd=F
z;Tspn-iyk6@aSJzg&VgGOHA3jw`+-raidT4NIB8Nl(|^t6f=bzL(IC?0@-aUyO=4)
zI03iuJJ%9u(X~%i&vvFNCW|VUPaolR2&5_k&<M>tDSKS`q`<y5FJCuZtMb3m_Qwnx
zU^t+Wlx&YNrofAZXG+Q*6=NKL$70M$5mRGyi&bUi*Q*+}t-2Ng>XDS)FUA-JkNI^}
z6Jz`euOdB1L-m`;;)5(DY`PW+oGU4LXpGSeUNv|=Nqv8eF_Pd_ho>ba{}y9BgI5Qh
zDJeNE#)!xHL(i)ECYxeyE{{#sUm0qZuU^&Sg-Ib!t@YI_TUx_x=rotZtm80^S1`F3
zrlg4PVk{qf=~^?j)?cq;gVn*ovlqsi;k0tbf1X>{zIDbAiLq>e=PcfM1@o(S8(QYU
zL2%|+4zu064Q_egZD;}W{f5o(q$rcO6r~~-m}1TFzE0}-u!;>v{JVk*V|J0<=>oH<
zv$E|l*_Y;|zWrm29C++Klgj=QBcl!`qFQh@9x-DAJjXCdN}eBM9E4X1+jJFi%@kvK
zLpN!yy|R%TlSOB4Na{N_#^?{PCOjP8QL$z?RUAQuF|&LLoXZiE3GW-1XX%33sbf;;
zkjlm_SoK^*S)%+<RMOfXD;oo0eFTn1W0b6i*TxlPcwi1|>nh6_53h@3Tg2p88=Q{s
zHZ?D-Ydzk1d*E?boeipm`HZIocCM5jYl9c(+%_b}cma>qSsYDo5#Zbr=iY9B$8#c=
zW5C~m$KK496oGspnEM*Sb4Ct<*UI5>pl85yj#KW?$C&*XsX30xIPr3+?B6kJ;V}~1
zw#FDS#axjQKg1Yg;Jx4VtMJ}+o)H`9JX|;vHpb-Y6{shzwtr&T4ca*A?x@N}@#4;w
zJI)l#*YN5jtxc<J`~s^k>a!@UMzJ=R=h(j}%&t6$mZaptG5X{ZDyy_ULT?hJx|P9M
zIu3I%>qkp($LObmR2HaSv7{;&jHuxy)hcKs2UD5zbmHk>3G*TIxH)<(0iN?*j+le;
zORKE1DEDw_=ZNx5N}ds8cwuVh6oEd57YFYXdMf!T#_u$^A3KV}{G%T&qso;>0Rh2I
zs;RzS2x<YB1KH{7lY&(iqI7dvRW1b4b;>$B029ix7~>~+92nTCl`$5*9J_Drn#x97
zSUhBoS;1IC4$pb04NU4BK2C2CJf3jyFep~R<H+|=+2hd`{}5->tlT#}K18hwLsNE#
zs4QrsK&Y<OKroszFve&J?^Adf7h!sgu>>x69j7kc47iTz$m!M!lc~VzE`{ruNt~`3
z>&Vyd^Txw<%uJ50UOVBkgG`#HnN-9ClVkq(ehFOJg|VqrQbwOLTp9Fg;c8U`+C4a2
zWl^sUPbn9v7ml`Lt<~1!%Ek?PGc*&m4xIvRgWd(rnsy8S1DfeW&Fy=I|0~Vy`(*nE
z+Rkzu8_duL5rD;8I|-c&`ftfV?F&Ck{0}t?z70-&NAz8Zqb9#6J~jRO;@{7W`UxHg
zpr)TKJ~jP^;{Pkn?T;kxF*JMbspuTx&!L$<)VMm)^4f7x%>ulkEzrKuEWi(%T^|U|
z9w{q+glvz3X1-|A6-8Hqb_cHx&HQztnW*VEhGsp@p?S#dU%|ljs@4UX6?c;jeV};=
zzJq2({h^ttX^s~DgK+A+;M0ZA5KhhfGoe}D&%&v3$nDxZ0n}{30`dQo<{m6T9Q8_x
z|4_5SRl+~i9AoRi*`q1YCe*KOl|X8m2OJwP7==@_z(b-B3#Vp-j|x8~oSN}}iBHYA
z6QWOv{+pWP|Ez#>qR&G!QM1b~iBHXAc2)cjHBaOF;Ovpdvi<)?7iCMIAOl<Y44Qt9
z=;wJ-zKqnfqW(KcIJ)J(lf-`~iT_R#|K}tzcKc!-k}GBVVsnR&t7je$?Xu=4?@ATp
z7Tr2stjzaiN-V9|e)jx`Ex8*nsq<aCycv~V9*CW_ZOx{RVY~8`A9OmQYNw3H*LV6Q
z4tN>%Rhhn4_4OsQpS_YTUza*H29(=B;OxaMn>!@7=<O3Wq0qwx(QEZDwoNXdGa=xc
zImfE{&Nen>pIX^BQFpuF?pm9b^Uix7^1e23`ROy5$4uIrJa3?fbJCP#ZZIc0sOGeu
zY1NOdE2kaqdgefl_}2SAOSAn|eqR25%`W%$Ydpwz$GPxA6K!9PzIiY7%D}MN6WdG~
z^R`{32FbsdTKIKC<&|dkQx((A^-Xp)GTq!#9ZWNOsx_(RxCSFXtf}CjaWz}yn=<ss
zpSISA3N@aurjMM~=lko;e$46j!gJC2kp(7hZc*6d?CZPBawd$ek~nVI;v3bcC6x`j
z@a?`bkp=(oS3NJA{o*pe?fx?AX<$>&6FnFA{Cw}=A*r8u#w2Fz%RidEx_8+n`O>0#
zX0{ytc~Se=u}fa&&2LVvUFH6zc6HMt7nk0A_teJrAN0d$m63tw2B(|7RP8Hh{}`2c
z1>jsd+W+{9InFdzeR>sOTm~YRUPZ)sl}!+P1)%vgfQf3+HGoV4%XNUss>yYLSyurz
z6HHO28vu2$0d%?nkf@RYOw*Kc6Dmo?Q%zUfsAeedOsJWvE0t1vsAj1`x1fGjeW_-v
zLsWBA@hqshYB1G2brMSX-9jZ5Z=;e0YUFM3g({V5k&3tjwOEa(`bA|>Em0rcg<7f-
zsg|i*RLj+;_n=m&pQ%==Y^qi2^ZQV%)gmaBd6)b80F|s&O&)Mx?*VKkSg%ak+}Ha6
zow5OvRWd;iL4k(=8&&*6fE5n__7iMY-j4uUWdjU&1dyWk5ZE39lzI%XP4#^Yu$ABp
z!46gY2|$-e0Arp2{H9J4_&o-w_!MB58u=99Ai;HlJu2cEz@R4pGoAtLRT%`qPXTJ@
z0PI(ZIRNJfo)8>RpFRf|_Y7d^bAUrCn;<p^p!o}cBWlqLfJ_3*OMqjl$xDD)&jB_Q
z99O1S0Cisgbb1AFQY91Q5EOU~a9S-&1z7PCU_Zeb<^2Yr)hmDjZvg&LdkAc=<)kvD
zs=jXlw!Q-wW)!!eJKmVRW{k1aH(i=>60YA{#7CPfai+^^qzT|4!8L*m6`@;N&KP7t
zU+BniRb{|e!6ty(xd5)K#9RR92%Zq!RG*pw#_0e{%>cJlHbHDIfaVr}+iH;oAd|r2
z25?t3aRZoT2G~q+Uzw}`bu9p$tN__6nIMOtfDPc0injr*a0A#+@I-kVmX@Zcsw>qq
zwTCK46>^7quKGghFWl5&cS{TV%MWLo#WPxsYqGX-=LIKI&sxs5m|4!lZBo<zQQKCH
zFWfycWA*+Mn>v5hVM43R5Bqlb^J{xft=-+{^qRkK?TpNrc8e~QS+nnhIpWoa<$A2^
zv}^gu_5F^Qif?`1Bm8jk&yTuxm}@UKqe)cs<$`M8if>XA*ZKx+ov^Q7+{!DPH?7*7
zH=x_He4j1vkkY1j(7J>k9~AuBO`Y<vw9wzUsdApsZ{1Qxd0Hln!naeim+M!BrnnvH
zrHbdaR3k3#!qK?r$a}cFMjg<@`2)m2Fwd04mX=0l)u*22ATzkT?n#FRs-iP2A6xR`
z-iUX~$S*9rbZ%FHvn)1Cb9|xqRK;glDvWJ2%aYP&mfPHFDS@XfSMw-*KH<kV^nI=F
z2X8yOBQBpBl<ihU-S@Lv)W&SL!KPnT=tH+g1qR6Xx;41&#?JDNuQpUAK6J}(A10gD
z$tHfu%HU->(t2SGxe3PaB^$u-=lBYeDQvSaezAHedACbmbcpsy*bZU1Z>>FcGP|}D
zkY68g*IT>J#v$zjV=v-Hymmv_9xyfl_wcow!uCsn{L-B%>`!6*-kJplS37_Yewo4#
z3EFLmI{{|l7c1Ny*UCef&PZnbGNDB|2)_3S!><awnc+zP2n&E$P1reM`1!=~6_Yp>
zj5}8p!rK!}7bUJ3?8p3K&2&j%AnY_@X_C1(*kxfE5?2Cjl@xeISP<AkVONEf1lwSB
z?)^1krNFj;G1;#REDdL?1l|x<25h$k-V_!Lc2HO*827F$<hZcg5?2n)gJ0#5?g(Qq
zdkVYjWOgkC&`aPw2@D0xE9}0oFtCEc9tf)dR!CU3uyC+)=mmDfLokjb{7RsO2zx9H
zcha;_-dJJaQ_0L@9wvd$ghhkp2ICRP5r+GQT0UXVr9h62BRCOx7QB?W7}%fSl;T<N
zN*I3D(4J%T^DKC62ju9*J!$QY!2BqLt;YRF?GT48QUNdyT--L(4h!=YhTF#4QDFta
zct~(RPdg^8Fc_-g%~I{Suws(e&e6L94o|;839Jr#9c-pj68I_XWMQR+)d2fdSQ%k8
z!L|zv7FG*vr?9fn+_~D2-`sfqA(a<c2lnq07z)ij{tWVmurOhD!S)KP0L=nFhZK^%
zi;y_n5Y`F{ixgHL%wJfP8|r7~I7ooNic(+$u%g0ZBy&TsV!~p<*wu|7fx;?-agu5b
zDFMa_tQr`*zX>Er;%Z5GO}YOiC9t++{sQc=oKByEv4PDXCK>7VC3ADIRuUH{tOeMY
zV4VFLfU$usA)SOZmN@)?p!Ec^Gq8!k*0Arf&ykvfv0~h%*ZA#(Q)e?U#^VmJrgI}w
zcgc(2H8lL#=SV#yFK!HL_|40adV#U6_?1D!uP%->fXAQpwS(Xn7DpumC3AZ){7T?R
zgQSvpc)08DNP{Kr8+f>B?npzy*wq~%f69&|NZyWM2ZZqp5Y0{;e}@H*64)6VR)cX}
z7!Ag<zlBVMa9tQ9aa~|ffiV3jtSjsp4x(veg>{2JPuMtN-Qf=+<MAIaum^08Sf&ZW
zdcx*?FQ$pYdcl4QRt$QQu->pU!2+QtgRvL-KyFFiX%g2L%mW*XLnndRc})62cvp{U
zwgi3$+bnF3u>N4)9NtKCg$;n6PuM(R1HpK2oM}E7d+>WmOU#5p&<iCFJz&=^pasEz
ziv$jaoi1##upwZl!OBAaB5Ww^U^yd}2pa}gPS{dm!@)}NG(cJ=Yy|A`4u<|;E|7<!
zwX~WuB8No+q&^rIm6c%3GZIo0jEl+|i5msGj<B^7HyW$}7}tsoVC;n-Ab!F)bDCJ`
z7)Swh4bw&`@JHCGSP!@cYyxA&V<9KOxCW#M8wdLo7!#*mHhMg54-!q=A#4I|VVsKD
z7!GK=pF2L0IPEg?BuId;UBV`V6%)2wGXDe?2*$;S(=!X40x2PEpX8ki79@H13rht1
z9ft{vlwJE%;55L4PN*FamIQWE*g;{_!LDG&WI7~_r`$DRhr!sGnUFKEt3e-?I0gHH
zuwxE}{+|U{1A~j{FA4k^_HEcq$A!&?T^Yxr2J{IqW|;%20;4AMKN2?=_9s%_Ibl5i
zN1|1=p;N(lIOju3^8Bj<<DvvEfc+3Q(<Nx0SqmXggk?Z;?-oJQVSfgF6&k0swiv>m
zs|%ee>=)Qu(KGd+?}G6VFM(_Us}F6z2gm}KLVf{^gMJ`^%gBXg3tJA>6O4%sW!@E#
z-ohSB+)A)M!q|9Lyb96^tReJMF!X|5TMehRz~>UU2J9=z{6g4Tu(lHSQrJ4MreKYr
zUpWiZ*29hf;}ZN<;x@ppD2&IAjY)<yGI0Exz%T(~yY?%j9E_&W?qJ-zjgSywp29YP
zg$m0p1#Sil6P8EV7O=M%z)X3CrNA~Lj?26^k3U<p71B-u^9kDq)?QeCFb<mSkd?5T
zL;FhH4%mxfbL}rEY$xnt*!woneqhY|8>Arz3X(q<$Cmwfd^8eR43K-g3({CvaVc;&
zSQB9-gzW)qDlACYA7IVEzJ@Ld#)|hsnoC?6iQ5O(!twnJMlc{-vmeqy0z)M5Pq2<s
zU?><bKn_59N?a|8I|w#dSZy#?d<c>ttS%UL?l5G$lvmG+<InCt0x1R99=g6{J_@_E
zWNs*x90U6prNl!w0>fd{{(}6&l96~h#`2CsHVbPl>;%|0VZ20R+)320?Ew4+`YS;0
z-6_a%Vf`fVG}sBr{2dt0zab}u4G?w)>@-V8`d;#$g?&`mAYuQ2tpT%lhA~*+IoMMr
zaEP!}u%{5Fp<t}<JmeJt(r{rHU|S@wYfxVV<5|I!Amv?x&B4wz(u(t+dD0-`B=aZ<
zybRVDtSj_rVd=1&NZb#?GQdg+8zbxr*l@6J&_4>h3Y*s!Ok;&zL;a4~s0ZLUf!AS2
zU^(ssJzm%i*wrwi`a(|-b`y4OVH1UAf?dqxyrP;U>=sx8*muyAg=N7mgAw1K$Nwil
zcI$0ODr}~y5_kvp0mv{&qOiNLIkK6i3A+c|CpRjBP7-z>HZMTPrVD!jn-?HtGr;WZ
zxoijnM?ue&z=yCINT!56f?XVpX_m0ZunVHM#z6lp><R4LU`(^YxN{ssyF5s6?I>~2
zIR76MI8R^>0*(orFYGzkabXLjz!zXAge?NYWT(A^JVm!MEtk9;sC(R<7d9(|y#}iV
z#`+!8DSP1!q_qQLrINt6U?#As(5r=U#Oe~aMwkigGN$T8#H|&kgWbRcF#~L!uv}mq
zN4%C;PsZbK2IN2@<h>fWj#H@`?76U$g}Gsa1vb;K!mMCcVH=@QjD{y@HJdQr=VA97
zU|i6cwnD?z-0@-OipI1}0zCk|gzbQ4Z+e1pm0JLN7c?__;e#t0*=}LE!Ny7V?-7;<
zY$Dh~#Qh;GFW4j}vuk?+na3M&s$@O@##ZM8;~LI%NLYTbT@rUh3iJWvwcaAc9Tipp
zjMsW($AtMx++wi591Q(mPyz{g7YnZDhmU$Vc1vKN5LO7RzOa*E?CQc`!@-ur{#)Yw
z!A5{FodM&H1W0+SVE-d=MOdC4frRG-@<9hyybg?W0bH#Z1BIOjW5t1BmBBW^z9ezQ
z!MLy_gQZDa39wGWG9)ettfw&h6@euISqZOzu7a`EoK|arZG?SY;!1;kChUg9l>y5O
zwgqvS5*G}%MJ`@$2`dYhA}q_v>{>a%c!9Siusm2tVRyjTm=Lf|!tP02C|GAOUMby|
zxG=D9B`zC`y;T9Mi!k0<fvbfxFYo{GvgnDx2nJ%%kUbR^3C6n|WY56Zm?*Gsz<Bla
zTv#+%d$3(#FTq%GMX)cycEf%ntP<Ec4B$OrCOcZiz!*T@n_)78!PR2%;Rm)4wnf-S
zV1*>kP1wg^>2jfB6;>H61?&Lw+JsdB<8A(fV1_XJCxBbff<u7rfNV@vFeL@@)-2Dq
zYGAQoyejgRxawdv(H+OYe5Aln!RiYuAgl&hoG@QuHNhI_n17j>_jTE=wE!DSAn)sv
z)dp)K%pZ)6sRK3|1~0RUfnn@vpMl+C>ydb00IpUSAM3z)^;A~a=U@%Nc=c4yhU3pl
z>H#*A%pnq3pP3=NR0<Uq2cIh=uZqHiH2~w}#jBzU!WzPlhcJZ;YXqOuHLsK+gf-^+
z+YXWr7%7lfI6S6IQNo(S=RjnN7WM`FU|D7>3Tp<|0T&xgm4r11<8>iZ3>f#b1(-MT
zV*gQ@1hxd+<>_3jD+_A{mWpMT%WV}f_Eu}K^Ro0-mAEg#E=gQ9Fki%d1$Is1noHg`
zU^gVLr49A7HD3eX68I$od5qhF4Uo)jr4sg(35-j1J7Mj??r;Dg@!JwyN7vsK#<_)c
ze1i?ESuhgk7RGhp`nwg7$Ayy%VMlxf;#}o2%E^VS6Fv%pF>!Js>x>T{FfOf}T*$t~
z$8wa%rM0WDF0dDYab@i$tSjurWIX=e1$Kiy2awBX4`JP54?~}G8SM$i?(YG+6AUh+
zy(O+E>~6yP2<rvbU07eq+Z!wib#TCb2WDr1ec((NI6yM@1=|P4C3qkhr-Od5_k%GF
zmALP~4hkD4tUuTvU|gz)OWpynV{k~gijI=Ffqbx$s~F*Ef#1WP492DP2VsL?j|Ah=
zItGl59t?XF7}HpZ8v<4njH~E4VMAfF;$qO_g$;wvdW-S+PY}p23{@p?qOcKQi*by(
zv`!MnL&gHRVony80GkDp{UmIpFs_(WgpGo|5jN9QGM;~<0h0tKO5hJ*(_wQZoF;4x
zY#s_G#>3Tq#7AGO2VBh<Pc{}GO=XRkA#5C20N6*+Glh+ZZ4Z<{C2#^@kg!?8CW7%-
zE~cM_O#<U@eN3~3O$PHqUQS+fg#842F5<YR%oR2T_7^yYnA-7Rt-z^(&74r155{vg
z5sV8A=lewxHw`uy7_!B}l3;UzA^Szxbl6y69Bc^~Ol<}j*B8bub1?M(OgLO%2v-1d
zFe})%(SpyQ*MPAxvtZw+fwUeBuJ$uN9thhYY&O_aVadYgfIS!XtFXCXCcB(E92D@i
zdHAph+azp0*m_8P$Yx;+VDtQD+9GTre9m$WAt}NZ!LANr+A3@@{7;41w+Z|Opa!HV
zWV^5>u(?h%?GUyUK37C8Dm#TOgUuC@>^EV{VRNM;<Go%eZ3RB^VSQ;0y$j5b>(5F!
zk1?lnvG@m&$7vPp+hAN5QYG_h*ms4U7q$lMHBP(s&=-WQg`Eu+4}DSCI@nKzT@uC~
zU1P@aXP2b`^6+ec?T_=F^L>T{Cd2NCR&kcR0>-2BD{M}|oF#8a+(y`(g2`?Q+XS0a
zFj*!TOl>pl<0yo)X_g(3XVDfoM*%sV-WQevo0V`neJllTh0RLHo(S6po0X6~1!E=K
zVNbyxb2iP9xE-*^fH6H6X5R_86b>h$7Xp8SJqR`@oR`9WhdmfJ(<@=S!1yaD(`#Y7
z!CqsJIA^>8W3TRk{Uut(Q{03Guz`QT#vEXGoPN0g;cI*G!8w4ZByW*2^FG+j%u~`T
znfJr)ir(TWX-M3ku)FctAbCpM0kF<sJWX>;+(FoFB+i@nf8lF~@X-R0=Wad;JPbPy
zjOT6vVMkzB2IINwC+sNf5HOy){=$yI=2FYV-;inkg%6G)p1S-End~?h6Q0*RPx&J<
z;R$>+g77>oF6<=i1`wX6{9zeNJB5$h5T2$%!cN2HdcZTNq_DqXZ$JY%;!6oT13MYa
zPFPytS=bzK$<Sql{R5i=jx1Q%If>&)E-Nfm;>dUh9ZEZo4-QPS@?bEv3$R%S2R!be
zJMaHpgu_Y*c?%s%yMzyBCaWNs(_jz5pyFWUJ${al%dj~<ICi2XE?pSMNhM(!u*0#(
z94E2Du5kTjW)75(1zv^S7J(cnRlr!uHQ0>fIH@La*M)JMd@AgQFpd*mh#-sOVI}6}
zIH@fx6E;uvW1aB9uhUT4E!s4Y>I%z(zX^@uG5lQEZP+Z3d&GMMtmKX`Ha<?+ApVem
zv>`?v_Oq5&kNvFCwfWCdTOr#Z+aWt3J0ZV8eupIE%fqjbjgU={&5$h+{vXRy$TG<C
zl%9pGxOV10Q1PiI{s#yD>w^z2@j<0@$Q1~mLf;124%q?O3Hc53J7gDRH)IcFFNFW+
zG7rN4tvUob3^@Wh200Gd57`Xa0^z-bM!B^T+AnaHK$b$5L6$>SKvqKdbkypUzW&w<
zW;gyv*pobJSutx{`wdjWU&XT^w;^{RcOmy6o|w42Ap9{r6~h0WIRfGT*1SL&FCniX
zZy;|Wd?v^Q$pzt$<rat=#0s%N42TEB6XFHQokvrn1Fgjk{yKgNayn&gpmnsl3IB(N
z|F|;{_Z1cNSjc$DM93t_WXMmDDUhj<M94Hq5~Lr*7g7+i68Tp_@~e@htmT{VAJWc1
z{(+o>q(aU^E<i3qE<w^Dmm%qp49FG8Rme5Sb;u3KO-Lr>R?6#A)&;o=^hQ<fApEA;
z5z+}VUBw4l^Q(Pjt$8g^5Sx{fTGl!=SMGY))&Noo@+^1CH=)*kCbv*HIl0yOFzXP@
zde|#e>k8HiWiw!&Kwkdm9q)wlE+_9+=3t21!Mt(qH-j#%wpFmMFS-XNAB4CLxe4I|
z5PZ0y4Zhg6^in^DTT7@-;npfCkHf9Orj)=)tDmW84ubg40sJ?l2as&YL&zgYgqQj<
z+FI1YTlfiTaFjJDWlfZ|zbU0;MQga8do*w`PR6p3P`8v`F;;hzH@`CQ`wG9GjE2-y
ziLuuFDJx>F2QBXDF=#!~zV98UpjQH>=JOE#E{tPe)%sOb0savE6XX<xzYROL73pVv
zX{q?(wv*V#-<|n;^kfLjvO~;h%?N1TkBWy3Qw;`L57>*sECS&LKCk?DVjeq%&>5H^
zbm#=gelUM*dk8%o+7<7L9SRnLZH#5yhvf`FIT_f-Cs6og3ZG&b2jOEccpS#=cus~7
z+Khty0O7MVd`^asws=GMTf1xjR>NKed5J>tpSM~**!NNC5L7S)HlNR13_B6_R0tpB
z2!$VxzU6}+d;o+GhAf8gL6QZ$u{RIK9LUcQ1z8B;<0x|>vmvt}Ga=I<d=_RJWCmmc
zDrP+MF+a;$0AazbfE5iy#e8t&d*~I=d^m(X!sj<$ApffBF!<QPV>m~kw?g>10x#0|
z9K;`xJ&;|Hb&x#R!?n=tfqTfaMin1wEo0vfv>p<Qdd^{ox53^5*$mkLDU56x2xr}_
zDgb^ubTYQ3L30})Qh5N)=SUcL5jJCg{UC<h*>-MY3<Y`fz01T5+=mpEI@B5z|F6n-
zwSmv3`2UM`<OSnnCOaWJAffPG{dE<^vkJyIxcYjSwM>EE5Ox8W&12KDARE=s!>q+j
zyVbT~R)0I&#B=_`g5BU-AbYXR2F=`j9)%5bRmiEH6&?itPi64&6qaFv@Zkzq8GOtH
z$I9JNprdot*Tc~sj_7y@p9VP#;m;C(LwM@Z=BVfBca3~<{=~tv`6VP9k_PDoxdgcY
zxd^!nxdXWk$%5R1WI}F2Za}U=(s|l3<7Eg7;psL8@)jur`U>Pa<eF$#MT}!Um(M~`
zn1iukZo3b;2YCSDd4CqCDZhE}fsZ8EkDwpA`QtPL9E$)J+6jBd=V;F%;E75cVfBxE
z0sI`219=AFgCMUUZy>KB!;tj~Mtjcp&Z)CT!Ley0tSM<DY*EA1>hrcDYEw^J0Tq;L
z`$ApoVH<AxNIm%6R!9x)X)6r7ac^58s0}?GDxsIHsA`jHE35+F*gjK5`q%=TIs3h}
zMeFk|YQ<YyO}y#Dnbf1Vwnh!sS)8wENiN!NP{-fz*AF(ejSh<pi^T3?OI{qR)|daO
zJ-zI6Rl?LZJS-w6EJ|~|cPO#RrZ2*pw@TAZ1D#uDOfiNAoJI}!=89L%IN!~Z{>kpF
zsxzBy(oJbLRoY~H9N>IEkCu?X*O3#MNu`$SrnXVeHq|xMFq1J`Z)zw%-RP_@H&g<2
zCD$8(R_<t@^~<Qv1I?!Ju&Ai8XxztecfKR&kDQR4^#|`Re!t}_ceUGM_yxG$D%8mA
zU!<qUAMs{WL|8a?P*d)zaW2EJlIwj$b$czT^`^V|()$S4n~S#WS^R6IeAk!0-*Vqw
z&1YWM%a7VOYwCBW*^Y+qBV4aZDsIlR@N%={EAO{7@KAS<H^B8iq@j1ddEhyE<p*v5
z-a`eNQM&7uN+XZ!Wxg1#4}ZURu9q*}Z*^%#?s}UGzTdLLL-k@_*Xx_o_Y`>Z!?`Zk
z-bc7z@YH8n)vcq3-d^y2%X1I46M6N!p6aaGh^+MQ_u=2~x2tFVec%22{+1*1AC8&x
zs7C5{@~OubBT|peuY%o-I6c}&HO^~92Dsh<rPp}A{#eb2lQ6a-ak#N`*7i~R+z`Qc
zBNf2-^euR7^w!h$QaSpZ5xsoW3195}Bp(%GMcMOwRC_CW()CuR$tSEe^0fJO*84JD
z?`@jaOQk-){;K%<Ef;*$I^@-_`>2CfBSF9Kqr!3<eroFsoSwsM#tHpV0oBkzgvnQR
zF^sqX*Gr@<LCUk<?V_>o+cncyoj_!O>orshcKq$1-lu-@``V89Dzm$>Nv~H>rF)?_
zoV7*jM+>T-JdH@z%fpD)&lOZlJaAGuyUI`fxd2V6>S;8TusGe-0bL8Jr=CXU|0u4r
z?&NVUuEO&eg>{R+nwlT2bG_@TM1FH(#+V;QzHfiHze>o1{&ZFxH#0A)jP^;v@zPCt
zy1#1XjSl)?qw15-$Z|DCg%$XJsKifQ%#U3?RYc|UK|ho!s@nU!t2t7oufarkwy1jL
zgN~QI{r|1tXaQ#hg?-;u;HNtKqIOpYcXLO}owa0EI)lf%^JCcMz0fnN-0X%cG0|dJ
zhE)vLTrc0+-EMB#w1mB599ts7D&ZSdkh)jU@bifda^|&n9QSF(Dj$^%HWdj{h5d{`
z9T8Rh48MqfHQ74fedT&**QHlY_I2%E=x^QRn4nczlM$nK`WYemZzWY0%Q{?Ac@{Ei
z>3^40=>djs=@MKDDuqQ<)H3iGI__j9+@2bDt<CvIW3UDDZ&(Bt>XPcGLO7{hFX(c=
zow)t)H=bA$T&LZsQtDzM3=h{Uy@G;f*Gpd52NPD?2rM)>G2fO_c?;t-bG-$u({rQo
zi;KIqA_D!xT3qi5>+4f#*2JR5WXG0hZmC{cwME`A*PF%0wI1F-tY4Q(W>XWq{s!NS
z-o1;g_MZCRHn?%RjM+4xv|3Ww_*hRUt<nn{<+#6|{@DL@78T}?eQ~|btbd`%>o4l$
z-r*R?k=)(!Wz;Z#?2GGtW&`t9-O>Ho-yu4dqsWTf7w=%T0TH?_SRM99+3CTmZGaJ|
zd;^R+dRkeB<Kue$S+RL~dUU=`H}jgBmQ&LLFq~eMW7h}j&C4sj2!@qsh^kb?7^Ke$
zQ5%YYFAq_tilEp{A?i&LobR(j)uy7xrkGiHiwzG@E!;;c0{z#O%I!w?+ke$;a&4K5
zEk&^<xvJhI^YdH_9b44;Gq!?NT_GhA5{Qsb4wd?+=7Piy?=!pJpEmT)x5viiyIn%Z
z5*iT}6@%}&;p%ZQqqF<eg7`9sw81~6W1!K|TrizC2a&GC;aUL6y~=>ts(}&e!3eA0
z*k>gTh<nPjk{$!iD%R5@P_=LA;idvTJiJs`d5<79-NVJ&7xC~`UlsT8QByoTN-@r=
za))^AHbtr9As+QiQ7MH(Jr<NTMXT*CJZk7sG3reVk97CI2F`lxHc&%adz4gpTX_V#
xPZgNZFr`K-k1&(_hKA0l%!Z6=>mDxeU+mIIU1{wx!hNCm8ycx@UwZuczW|Mfq6q*1

diff --git a/infra/api.ts b/infra/api.ts
index 5ff65d8a..6937b1c7 100644
--- a/infra/api.ts
+++ b/infra/api.ts
@@ -30,7 +30,11 @@ export const auth = new sst.cloudflare.Worker("Auth", {
         authFingerprintKey,
         secret.InstantAdminToken,
         secret.InstantAppId,
-        secret.LoopsApiKey
+        secret.LoopsApiKey,
+        secret.GithubClientID,
+        secret.GithubClientSecret,
+        secret.DiscordClientID,
+        secret.DiscordClientSecret,
     ],
     handler: "./packages/functions/src/auth.ts",
     url: true,
@@ -43,7 +47,7 @@ export const api = new sst.cloudflare.Worker("Api", {
         authFingerprintKey,
         secret.InstantAdminToken,
         secret.InstantAppId,
-        secret.LoopsApiKey
+        secret.LoopsApiKey,
     ],
     url: true,
     handler: "./packages/functions/src/api/index.ts",
diff --git a/infra/secrets.ts b/infra/secrets.ts
index 5e642c9c..8793a50b 100644
--- a/infra/secrets.ts
+++ b/infra/secrets.ts
@@ -1,7 +1,11 @@
 export const secret = {
     InstantAdminToken: new sst.Secret("InstantAdminToken"),
     InstantAppId: new sst.Secret("InstantAppId"),
-    LoopsApiKey: new sst.Secret("LoopsApiKey")
+    LoopsApiKey: new sst.Secret("LoopsApiKey"),
+    GithubClientSecret: new sst.Secret("GithubClientSecret"),
+    GithubClientID: new sst.Secret("GithubClientID"),
+    DiscordClientSecret: new sst.Secret("DiscordClientSecret"),
+    DiscordClientID: new sst.Secret("DiscordClientID"),
   };
   
   export const allSecrets = Object.values(secret);
\ No newline at end of file
diff --git a/packages/core/instant.schema.ts b/packages/core/instant.schema.ts
index 3c935003..3b28c460 100644
--- a/packages/core/instant.schema.ts
+++ b/packages/core/instant.schema.ts
@@ -11,6 +11,14 @@ const _schema = i.schema({
       deletedAt: i.date().optional().indexed(),
       createdAt: i.date()
     }),
+    profiles: i.entity({
+      avatarUrl: i.string().optional(),
+      username: i.string().indexed(),
+      ownerID: i.string().unique().indexed(),
+      updatedAt: i.date(),
+      createdAt: i.date(),
+      discriminator: i.string().indexed()
+    }),
     games: i.entity({
       name: i.string(),
       steamID: i.number().unique().indexed(),
@@ -23,6 +31,10 @@ const _schema = i.schema({
     }),
   },
   links: {
+    UserProfiles: {
+      forward: { on: "profiles", has: "one", label: "owner" },
+      reverse: { on: "$users", has: "one", label: "profile" }
+    },
     UserMachines: {
       forward: { on: "machines", has: "one", label: "owner" },
       reverse: { on: "$users", has: "many", label: "machines" }
diff --git a/packages/core/package.json b/packages/core/package.json
index 5ee442d9..7dadb820 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -16,6 +16,6 @@
         "zod-openapi": "^4.2.2"
     },
     "dependencies": {
-        "@instantdb/admin": "^0.17.3"
+        "@instantdb/admin": "^0.17.7"
     }
 }
\ No newline at end of file
diff --git a/packages/core/src/examples.ts b/packages/core/src/examples.ts
index 65b81a85..17b2c130 100644
--- a/packages/core/src/examples.ts
+++ b/packages/core/src/examples.ts
@@ -5,6 +5,15 @@ export module Examples {
         email: "john@example.com",
     };
 
+    export const Profile = {
+        id: "0bfcb712-df13-4454-81a8-fbee66eddca4",
+        username: "janedoe47",
+        avatarUrl: "https://cdn.discordapp.com/avatars/xxxxxxx/xxxxxxx.png",
+        discriminator: 12, //it needs to be two digits
+        createdAt: '2025-01-04T11:56:23.902Z',
+        updatedAt: '2025-01-09T01:56:23.902Z'
+    }
+    
     export const Machine = {
         id: "0bfcb712-df13-4454-81a8-fbee66eddca4",
         hostname: "DESKTOP-EUO8VSF",
diff --git a/packages/core/src/machine/index.ts b/packages/core/src/machine/index.ts
index 01b0c8e1..5f51472a 100644
--- a/packages/core/src/machine/index.ts
+++ b/packages/core/src/machine/index.ts
@@ -29,7 +29,7 @@ export module Machines {
         })
         .openapi({
             ref: "Machine",
-            description: "Represents a a physical or virtual machine connected to the Nestri network..",
+            description: "Represents a physical or virtual machine connected to the Nestri network..",
             example: Examples.Machine,
         });
 
diff --git a/packages/core/src/profile/index.ts b/packages/core/src/profile/index.ts
new file mode 100644
index 00000000..f28bdea3
--- /dev/null
+++ b/packages/core/src/profile/index.ts
@@ -0,0 +1,232 @@
+import { z } from "zod"
+import { fn } from "../utils";
+import { Common } from "../common";
+import { Examples } from "../examples";
+import databaseClient from "../database";
+import { groupBy, map, pipe, values } from "remeda"
+import { id as createID } from "@instantdb/admin";
+
+export module Profiles {
+    const MAX_ATTEMPTS = 50;
+
+    export const Info = z
+        .object({
+            id: z.string().openapi({
+                description: Common.IdDescription,
+                example: Examples.Machine.id,
+            }),
+            username: z.string().openapi({
+                description: "The user's unique username",
+                example: Examples.Profile.username,
+            }),
+            avatarUrl: z.string().or(z.undefined()).openapi({
+                description: "The url to the profile picture.",
+                example: Examples.Profile.username,
+            }),
+            discriminator: z.string().or(z.number()).openapi({
+                description: "The number discriminator for each username",
+                example: Examples.Profile.discriminator,
+            }),
+            createdAt: z.string().or(z.number()).openapi({
+                description: "The time when this profile was first created",
+                example: Examples.Profile.createdAt,
+            }),
+            updatedAt: z.string().or(z.number()).openapi({
+                description: "The time when this profile was last edited",
+                example: Examples.Profile.updatedAt,
+            })
+        })
+        .openapi({
+            ref: "Profile",
+            description: "Represents a profile of a user on Nestri",
+            example: Examples.Profile,
+        });
+
+    export type Info = z.infer<typeof Info>;
+
+    export const sanitizeUsername = (username: string): string => {
+        // Remove spaces and numbers
+        return username.replace(/[\s0-9]/g, '');
+    };
+
+    export const generateDiscriminator = (): string => {
+        return Math.floor(Math.random() * 100).toString().padStart(2, '0');
+    };
+
+    export const isValidDiscriminator = (discriminator: string): boolean => {
+        return /^\d{2}$/.test(discriminator);
+    };
+
+    export const fromUsername = fn(z.string(), async (input) => {
+        const sanitizedUsername = sanitizeUsername(input);
+
+        const db = databaseClient()
+
+        const query = {
+            profiles: {
+                $: {
+                    where: {
+                        username: sanitizedUsername,
+                    }
+                }
+            }
+        }
+
+        const res = await db.query(query)
+
+        const profiles = res.profiles
+
+        if (!profiles || profiles.length == 0) {
+
+            return null
+        }
+
+        return pipe(
+            profiles,
+            groupBy(x => x.id),
+            values(),
+            map((group): Info => ({
+                id: group[0].id,
+                username: group[0].username,
+                createdAt: group[0].createdAt,
+                discriminator: group[0].discriminator,
+                updatedAt: group[0].updatedAt
+            }))
+        )
+    })
+
+    export const findAvailableDiscriminator = fn(z.string(), async (input) => {
+        const db = databaseClient()
+        const username = sanitizeUsername(input);
+
+        for (let i = 0; i < MAX_ATTEMPTS; i++) {
+            const discriminator = generateDiscriminator();
+            const query = {
+                profiles: {
+                    $: {
+                        where: {
+                            username,
+                            discriminator
+                        }
+                    }
+                }
+            }
+            const res = await db.query(query)
+            const profiles = res.profiles
+            if (profiles.length === 0) {
+                return discriminator;
+            }
+        }
+        return null; // No available discriminators
+
+    })
+
+    export const create = fn(z.object({ username: z.string(), customDiscriminator: z.string().optional(), avatarUrl: z.string().optional(), owner: z.string() }), async (input) => {
+        const username = sanitizeUsername(input.username);
+
+        // if (!username || username.length < 2 || username.length > 32) {
+        //     // throw new Error('Invalid username length');
+        // }
+
+        const db = databaseClient()
+        const id = createID()
+        const now = new Date().toISOString()
+
+        let discriminator: string | null;
+        if (input.customDiscriminator) {
+            if (!isValidDiscriminator(input.customDiscriminator)) {
+                console.error('Invalid discriminator format')
+                return null
+                // throw new Error('Invalid discriminator format');
+            }
+
+            const query = {
+                profiles: {
+                    $: {
+                        where: {
+                            username,
+                            discriminator: input.customDiscriminator
+                        }
+                    }
+                }
+            }
+            const res = await db.query(query)
+            const profiles = res.profiles
+            if (profiles.length != 0) {
+                console.error("Username and discriminator combination already taken ")
+                return null
+                // throw new Error('Username and discriminator combination already taken');
+            }
+
+            discriminator = input.customDiscriminator
+        } else {
+            // Generate a random available discriminator
+            discriminator = await findAvailableDiscriminator(username);
+
+            if (!discriminator) {
+                console.error("No available discriminators for this username ")
+                return null
+                // throw new Error('No available discriminators for this username');
+            }
+        }
+
+        return await db.transact(
+            db.tx.profiles[id]!.update({
+                username,
+                avatarUrl: input.avatarUrl,
+                createdAt: now,
+                updatedAt: now,
+                ownerID: input.owner,
+                discriminator,
+            }).link({ owner: input.owner })
+        )
+    })
+
+    export const getFullUsername = async (username: string) => {
+        const db = databaseClient()
+
+        const query = {
+            profiles: {
+                $: {
+                    where: {
+                        username,
+                    }
+                }
+            }
+        }
+        const res = await db.query(query)
+        const profiles = res.profiles
+
+        if (!profiles || profiles.length === 0) {
+            console.error('User not found')
+            return null
+            // throw new Error('User not found');
+        }
+
+        return `${profiles[0]?.username}#${profiles[0]?.discriminator}`;
+    }
+
+    export const getProfile = async (ownerID: string) => {
+
+        const db = databaseClient()
+
+        const query = {
+            profiles: {
+                $: {
+                    where: {
+                        ownerID
+                    }
+                },
+            }
+        }
+        const res = await db.query(query)
+
+        const profiles = res.profiles
+
+        if (!profiles || profiles.length === 0) {
+            return null
+        }
+
+        return profiles
+    }
+};
\ No newline at end of file
diff --git a/packages/core/sst-env.d.ts b/packages/core/sst-env.d.ts
index f90ea1f4..002938bb 100644
--- a/packages/core/sst-env.d.ts
+++ b/packages/core/sst-env.d.ts
@@ -21,6 +21,22 @@ declare module "sst" {
     "CloudflareAuthKV": {
       "type": "sst.cloudflare.Kv"
     }
+    "DiscordClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "DiscordClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "InstantAdminToken": {
       "type": "sst.sst.Secret"
       "value": string
diff --git a/packages/functions/src/auth.ts b/packages/functions/src/auth.ts
index c560607c..c4b68c2b 100644
--- a/packages/functions/src/auth.ts
+++ b/packages/functions/src/auth.ts
@@ -3,18 +3,20 @@ import {
     type ExecutionContext,
     type KVNamespace,
 } from "@cloudflare/workers-types"
+import { Select } from "./ui/select";
 import { subjects } from "./subjects"
-import { User } from "@nestri/core/user/index"
-import { Email } from "@nestri/core/email/index"
+import { PasswordUI } from "./ui/password"
 import { authorizer } from "@openauthjs/openauth"
 import { type CFRequest } from "@nestri/core/types"
-import { Select } from "@openauthjs/openauth/ui/select";
-import { PasswordUI } from "@openauthjs/openauth/ui/password"
-import type { Adapter } from "@openauthjs/openauth/adapter/adapter"
-import { PasswordAdapter } from "@openauthjs/openauth/adapter/password"
-import { CloudflareStorage } from "@openauthjs/openauth/storage/cloudflare"
+import { GithubAdapter } from "./ui/adapters/github";
+import { DiscordAdapter } from "./ui/adapters/discord";
 import { Machines } from "@nestri/core/machine/index"
-
+import { PasswordAdapter } from "./ui/adapters/password"
+import { type Adapter } from "@openauthjs/openauth/adapter/adapter"
+import { CloudflareStorage } from "@openauthjs/openauth/storage/cloudflare"
+import { handleDiscord, handleGithub } from "./utils";
+import { User } from "@nestri/core/user/index"
+import { Profiles } from "@nestri/core/profile/index"
 interface Env {
     CloudflareAuthKV: KVNamespace
 }
@@ -30,6 +32,15 @@ export type CodeAdapterState =
         claims: Record<string, string>
     }
 
+type OauthUser = {
+    primary: {
+        email: any;
+        primary: any;
+        verified: any;
+    };
+    avatar: any;
+    username: any;
+}
 export default {
     async fetch(request: CFRequest, env: Env, ctx: ExecutionContext) {
         // const location = `${request.cf.country},${request.cf.continent}`
@@ -64,11 +75,21 @@ export default {
             }),
             subjects,
             providers: {
+                github: GithubAdapter({
+                    clientID: Resource.GithubClientID.value,
+                    clientSecret: Resource.GithubClientSecret.value,
+                    scopes: ["user:email"]
+                }),
+                discord: DiscordAdapter({
+                    clientID: Resource.DiscordClientID.value,
+                    clientSecret: Resource.DiscordClientSecret.value,
+                    scopes: ["email", "identify"]
+                }),
                 password: PasswordAdapter(
                     PasswordUI({
                         sendCode: async (email, code) => {
                             console.log("email & code:", email, code)
-                            await Email.send(email, code)
+                            // await Email.send(email, code)
                         },
                     }),
                 ),
@@ -116,27 +137,83 @@ export default {
                             id: machineID,
                             fingerprint: value.fingerprint
                         })
-                    } 
+                    }
 
                     return await ctx.subject("device", {
                         id: exists.id,
                         fingerprint: value.fingerprint
                     })
-                    
+
                 }
 
-                const email = value.email;
-
-                if (email) {
-                    const token = await User.create(email);
-                    const user = await User.fromEmail(email);
+                if (value.provider === "password") {
+                    const email = value.email
+                    const username = value.username
+                    const token = await User.create(email)
+                    const usr = await User.fromEmail(email);
+                    const exists = await Profiles.getProfile(usr.id)
+                    if(username && !exists){
+                        await Profiles.create({ owner: usr.id, username })
+                    }
 
                     return await ctx.subject("user", {
                         accessToken: token,
-                        userID: user.id
+                        userID: usr.id
                     });
+
                 }
 
+                let user = undefined as OauthUser | undefined;
+
+                if (value.provider === "github") {
+                    const access = value.tokenset.access;
+                    user = await handleGithub(access)
+                    // console.log("user", user)
+                }
+
+                if (value.provider === "discord") {
+                    const access = value.tokenset.access
+                    user = await handleDiscord(access)
+                    // console.log("user", user)
+                }
+
+                if (user) {
+                    try {
+                        const token = await User.create(user.primary.email)
+                        const usr = await User.fromEmail(user.primary.email);
+                        const exists = await Profiles.getProfile(usr.id)
+                        console.log("exists",exists)
+                        if (!exists) {
+                            await Profiles.create({ owner: usr.id, avatarUrl: user.avatar, username: user.username })
+                        }
+
+                        return await ctx.subject("user", {
+                            accessToken: token,
+                            userID: usr.id
+                        });
+
+                    } catch (error) {
+                        console.error("error registering the user", error)
+                    }
+
+                }
+
+                // if (email) {
+                //     console.log("email", email)
+                //     // value.username && console.log("username", value.username)
+
+                // }
+
+                // if (email) {
+                //     const token = await User.create(email);
+                //     const user = await User.fromEmail(email);
+
+                //     return await ctx.subject("user", {
+                //         accessToken: token,
+                //         userID: user.id
+                //     });
+                // }
+
                 throw new Error("This is not implemented yet");
             },
         }).fetch(request, env, ctx)
diff --git a/packages/functions/src/ui/adapters/discord.ts b/packages/functions/src/ui/adapters/discord.ts
new file mode 100644
index 00000000..7eef9e27
--- /dev/null
+++ b/packages/functions/src/ui/adapters/discord.ts
@@ -0,0 +1,12 @@
+import { Oauth2Adapter, type Oauth2WrappedConfig } from "./oauth2"
+
+export function DiscordAdapter(config: Oauth2WrappedConfig) {
+  return Oauth2Adapter({
+    type: "discord",
+    ...config,
+    endpoint: {
+      authorization: "https://discord.com/oauth2/authorize",
+      token: "https://discord.com/api/oauth2/token",
+    },
+  })
+}
diff --git a/packages/functions/src/ui/adapters/github.ts b/packages/functions/src/ui/adapters/github.ts
new file mode 100644
index 00000000..7a53faf0
--- /dev/null
+++ b/packages/functions/src/ui/adapters/github.ts
@@ -0,0 +1,12 @@
+import { Oauth2Adapter, type Oauth2WrappedConfig } from "./oauth2"
+
+export function GithubAdapter(config: Oauth2WrappedConfig) {
+  return Oauth2Adapter({
+    ...config,
+    type: "github",
+    endpoint: {
+      authorization: "https://github.com/login/oauth/authorize",
+      token: "https://github.com/login/oauth/access_token",
+    },
+  })
+}
diff --git a/packages/functions/src/ui/adapters/oauth2.tsx b/packages/functions/src/ui/adapters/oauth2.tsx
new file mode 100644
index 00000000..a1ccb711
--- /dev/null
+++ b/packages/functions/src/ui/adapters/oauth2.tsx
@@ -0,0 +1,137 @@
+/** @jsxImportSource hono/jsx */
+import { Layout } from "../base"
+import { OauthError } from "@openauthjs/openauth/error"
+import { getRelativeUrl } from "@openauthjs/openauth/util"
+import { type Adapter } from "@openauthjs/openauth/adapter/adapter"
+
+export interface Oauth2Config {
+  type?: string
+  clientID: string
+  clientSecret: string
+  endpoint: {
+    authorization: string
+    token: string
+  }
+  scopes: string[]
+  query?: Record<string, string>
+}
+
+export type Oauth2WrappedConfig = Omit<Oauth2Config, "endpoint" | "name">
+
+export interface Oauth2Token {
+  access: string
+  refresh: string
+  expiry: number
+  raw: Record<string, any>
+}
+
+interface AdapterState {
+  state: string
+  redirect: string
+}
+
+export function Oauth2Adapter(
+  config: Oauth2Config,
+): Adapter<{ tokenset: Oauth2Token; clientID: string }> {
+  const query = config.query || {}
+  return {
+    type: config.type || "oauth2",
+    init(routes, ctx) {
+      routes.get("/authorize", async (c) => {
+        const state = crypto.randomUUID()
+        await ctx.set<AdapterState>(c, "adapter", 60 * 10, {
+          state,
+          redirect: getRelativeUrl(c, "./popup"),
+        })
+        const authorization = new URL(config.endpoint.authorization)
+        authorization.searchParams.set("client_id", config.clientID)
+        authorization.searchParams.set(
+          "redirect_uri",
+          getRelativeUrl(c, "./popup"),
+        )
+        authorization.searchParams.set("response_type", "code")
+        authorization.searchParams.set("state", state)
+        authorization.searchParams.set("scope", config.scopes.join(" "))
+        for (const [key, value] of Object.entries(query)) {
+          authorization.searchParams.set(key, value)
+        }
+        return c.redirect(authorization.toString())
+      })
+
+      routes.get("/popup", async (c) => {
+        const jsx = (
+          <Layout page="popup">
+            <div data-component="popup">
+              <div data-component="spinner">
+                <div>
+                  {new Array(12).fill(0).map((i, k) => (
+                    <div key={k} />
+                  ))}
+                </div>
+              </div>
+              Nestri is verifying your connection...
+            </div>
+          </Layout>
+        ) as string
+        return new Response(jsx.toString(), {
+          status: 200,
+          headers: {
+            "Content-Type": "text/html",
+          },
+        })
+      })
+
+      routes.get("/callback", async (c) => {
+        const adapter = (await ctx.get(c, "adapter")) as AdapterState
+        const code = c.req.query("code")
+        const state = c.req.query("state")
+        const error = c.req.query("error")
+        if (error) {
+          console.log("oauth2 error", error)
+          throw new OauthError(
+            error.toString() as any,
+            c.req.query("error_description")?.toString() || "",
+          )
+        }
+        if (!adapter || !code || (adapter.state && state !== adapter.state))
+          return c.redirect(getRelativeUrl(c, "./authorize"))
+        const body = new URLSearchParams({
+          client_id: config.clientID,
+          client_secret: config.clientSecret,
+          code,
+          grant_type: "authorization_code",
+          redirect_uri: adapter.redirect,
+        })
+        const json: any = await fetch(config.endpoint.token, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+            Accept: "application/json",
+          },
+          body: body.toString(),
+        }).then((r) => r.json())
+        if ("error" in json) {
+          console.error("oauth2 error", error)
+          throw new OauthError(json.error, json.error_description)
+        }
+        return ctx.success(c, {
+          clientID: config.clientID,
+          tokenset: {
+            get access() {
+              return json.access_token
+            },
+            get refresh() {
+              return json.refresh_token
+            },
+            get expiry() {
+              return json.expires_in
+            },
+            get raw() {
+              return json
+            },
+          },
+        })
+      })
+    },
+  }
+}
diff --git a/packages/functions/src/ui/adapters/password.ts b/packages/functions/src/ui/adapters/password.ts
new file mode 100644
index 00000000..e07dfaed
--- /dev/null
+++ b/packages/functions/src/ui/adapters/password.ts
@@ -0,0 +1,441 @@
+import { Profiles } from "@nestri/core/profile/index"
+import { UnknownStateError } from "@openauthjs/openauth/error"
+import { Storage } from "@openauthjs/openauth/storage/storage"
+import { type Adapter } from "@openauthjs/openauth/adapter/adapter"
+import { generateUnbiasedDigits, timingSafeCompare } from "@openauthjs/openauth/random"
+
+export interface PasswordHasher<T> {
+  hash(password: string): Promise<T>
+  verify(password: string, compare: T): Promise<boolean>
+}
+
+export interface PasswordConfig {
+  length?: number
+  hasher?: PasswordHasher<any>
+  login: (
+    req: Request,
+    form?: FormData,
+    error?: PasswordLoginError,
+  ) => Promise<Response>
+  register: (
+    req: Request,
+    state: PasswordRegisterState,
+    form?: FormData,
+    error?: PasswordRegisterError,
+  ) => Promise<Response>
+  change: (
+    req: Request,
+    state: PasswordChangeState,
+    form?: FormData,
+    error?: PasswordChangeError,
+  ) => Promise<Response>
+  sendCode: (email: string, code: string) => Promise<void>
+}
+
+export type PasswordRegisterState =
+  | {
+      type: "start"
+    }
+  | {
+      type: "code"
+      code: string
+      email: string
+      password: string
+      username: string
+    }
+
+export type PasswordRegisterError =
+  | {
+      type: "invalid_code"
+    }
+  | {
+      type: "email_taken"
+    }
+  | {
+      type: "invalid_email"
+    }
+  | {
+      type: "invalid_password"
+    }
+  | {
+      type: "invalid_username"
+    }| {
+      type: "username_taken"
+    }
+
+export type PasswordChangeState =
+  | {
+      type: "start"
+      redirect: string
+    }
+  | {
+      type: "code"
+      code: string
+      email: string
+      redirect: string
+    }
+  | {
+      type: "update"
+      redirect: string
+      email: string
+    }
+
+export type PasswordChangeError =
+  | {
+      type: "invalid_email"
+    }
+  | {
+      type: "invalid_code"
+    }
+  | {
+      type: "invalid_password"
+    }
+  | {
+      type: "password_mismatch"
+    }
+
+export type PasswordLoginError =
+  | {
+      type: "invalid_password"
+    }
+  | {
+      type: "invalid_email"
+    }
+
+export function PasswordAdapter(config: PasswordConfig) {
+  const hasher = config.hasher ?? ScryptHasher()
+  function generate() {
+    return generateUnbiasedDigits(6)
+  }
+  return {
+    type: "password",
+    init(routes, ctx) {
+      routes.get("/authorize", async (c) =>
+        ctx.forward(c, await config.login(c.req.raw)),
+      )
+
+      routes.post("/authorize", async (c) => {
+        const fd = await c.req.formData()
+        async function error(err: PasswordLoginError) {
+          return ctx.forward(c, await config.login(c.req.raw, fd, err))
+        }
+        const email = fd.get("email")?.toString()?.toLowerCase()
+        if (!email) return error({ type: "invalid_email" })
+        const hash = await Storage.get<HashedPassword>(ctx.storage, [
+          "email",
+          email,
+          "password",
+        ])
+        const password = fd.get("password")?.toString()
+        if (!password || !hash || !(await hasher.verify(password, hash)))
+          return error({ type: "invalid_password" })
+        return ctx.success(
+          c,
+          {
+            email: email,
+          },
+          {
+            invalidate: async (subject) => {
+              await Storage.set(
+                ctx.storage,
+                ["email", email, "subject"],
+                subject,
+              )
+            },
+          },
+        )
+      })
+
+      routes.get("/register", async (c) => {
+        const state: PasswordRegisterState = {
+          type: "start",
+        }
+        await ctx.set(c, "adapter", 60 * 60 * 24, state)
+        return ctx.forward(c, await config.register(c.req.raw, state))
+      })
+
+      routes.post("/register", async (c) => {
+        const fd = await c.req.formData()
+        const email = fd.get("email")?.toString()?.toLowerCase()
+        const action = fd.get("action")?.toString()
+        const adapter = await ctx.get<PasswordRegisterState>(c, "adapter")
+
+        async function transition(
+          next: PasswordRegisterState,
+          err?: PasswordRegisterError,
+        ) {
+          await ctx.set<PasswordRegisterState>(c, "adapter", 60 * 60 * 24, next)
+          return ctx.forward(c, await config.register(c.req.raw, next, fd, err))
+        }
+
+        if (action === "register" && adapter.type === "start") {
+          const password = fd.get("password")?.toString()
+          const username = fd.get("username")?.toString()
+          const usernameRegex = /^[a-zA-Z]{1,32}$/;
+          if (!email) return transition(adapter, { type: "invalid_email" })
+          if (!username) return transition(adapter, { type: "invalid_username" })
+          if (!password)
+            return transition(adapter, { type: "invalid_password" })
+          if (!usernameRegex.test(username))
+            return transition(adapter, { type: "invalid_username" })
+          const existing = await Storage.get(ctx.storage, [
+            "email",
+            email,
+            "password",
+          ])
+          if (existing) return transition(adapter, { type: "email_taken" })
+          const existingUsername = await Profiles.fromUsername(username)
+          if (existingUsername) return transition(adapter, { type: "username_taken" })
+          const code = generate()
+          await config.sendCode(email, code)
+          return transition({
+            type: "code",
+            code,
+            password: await hasher.hash(password),
+            email,
+            username
+          })
+        }
+
+        if (action === "verify" && adapter.type === "code") {
+          const code = fd.get("code")?.toString()
+          if (!code || !timingSafeCompare(code, adapter.code))
+            return transition(adapter, { type: "invalid_code" })
+          const existing = await Storage.get(ctx.storage, [
+            "email",
+            adapter.email,
+            "password",
+          ])
+          if (existing)
+            return transition({ type: "start" }, { type: "email_taken" })
+          await Storage.set(
+            ctx.storage,
+            ["email", adapter.email, "password"],
+            adapter.password,
+          )
+          return ctx.success(c, {
+            email: adapter.email,
+            username: adapter.username
+          })
+        }
+
+        return transition({ type: "start" })
+      })
+
+      routes.get("/change", async (c) => {
+        let redirect =
+          c.req.query("redirect_uri") || getRelativeUrl(c, "./authorize")
+        const state: PasswordChangeState = {
+          type: "start",
+          redirect,
+        }
+        await ctx.set(c, "adapter", 60 * 60 * 24, state)
+        return ctx.forward(c, await config.change(c.req.raw, state))
+      })
+
+      routes.post("/change", async (c) => {
+        const fd = await c.req.formData()
+        const action = fd.get("action")?.toString()
+        const adapter = await ctx.get<PasswordChangeState>(c, "adapter")
+        if (!adapter) throw new UnknownStateError()
+
+        async function transition(
+          next: PasswordChangeState,
+          err?: PasswordChangeError,
+        ) {
+          await ctx.set<PasswordChangeState>(c, "adapter", 60 * 60 * 24, next)
+          return ctx.forward(c, await config.change(c.req.raw, next, fd, err))
+        }
+
+        if (action === "code") {
+          const email = fd.get("email")?.toString()?.toLowerCase()
+          if (!email)
+            return transition(
+              { type: "start", redirect: adapter.redirect },
+              { type: "invalid_email" },
+            )
+          const code = generate()
+          await config.sendCode(email, code)
+
+          return transition({
+            type: "code",
+            code,
+            email,
+            redirect: adapter.redirect,
+          })
+        }
+
+        if (action === "verify" && adapter.type === "code") {
+          const code = fd.get("code")?.toString()
+          if (!code || !timingSafeCompare(code, adapter.code))
+            return transition(adapter, { type: "invalid_code" })
+          return transition({
+            type: "update",
+            email: adapter.email,
+            redirect: adapter.redirect,
+          })
+        }
+
+        if (action === "update" && adapter.type === "update") {
+          const existing = await Storage.get(ctx.storage, [
+            "email",
+            adapter.email,
+            "password",
+          ])
+          if (!existing) return c.redirect(adapter.redirect, 302)
+
+          const password = fd.get("password")?.toString()
+          const repeat = fd.get("repeat")?.toString()
+          if (!password)
+            return transition(adapter, { type: "invalid_password" })
+          if (password !== repeat)
+            return transition(adapter, { type: "password_mismatch" })
+
+          await Storage.set(
+            ctx.storage,
+            ["email", adapter.email, "password"],
+            await hasher.hash(password),
+          )
+          const subject = await Storage.get<string>(ctx.storage, [
+            "email",
+            adapter.email,
+            "subject",
+          ])
+          if (subject) await ctx.invalidate(subject)
+
+          return c.redirect(adapter.redirect, 302)
+        }
+
+        return transition({ type: "start", redirect: adapter.redirect })
+      })
+    },
+  } satisfies Adapter<{ email: string; username?:string }>
+}
+
+import * as jose from "jose"
+import { TextEncoder } from "node:util"
+
+interface HashedPassword {}
+
+export function PBKDF2Hasher(opts?: { interations?: number }): PasswordHasher<{
+  hash: string
+  salt: string
+  iterations: number
+}> {
+  const iterations = opts?.interations ?? 600000
+  return {
+    async hash(password) {
+      const encoder = new TextEncoder()
+      const bytes = encoder.encode(password)
+      const salt = crypto.getRandomValues(new Uint8Array(16))
+      const keyMaterial = await crypto.subtle.importKey(
+        "raw",
+        bytes,
+        "PBKDF2",
+        false,
+        ["deriveBits"],
+      )
+      const hash = await crypto.subtle.deriveBits(
+        {
+          name: "PBKDF2",
+          hash: "SHA-256",
+          salt: salt,
+          iterations,
+        },
+        keyMaterial,
+        256,
+      )
+      const hashBase64 = jose.base64url.encode(new Uint8Array(hash))
+      const saltBase64 = jose.base64url.encode(salt)
+      return {
+        hash: hashBase64,
+        salt: saltBase64,
+        iterations,
+      }
+    },
+    async verify(password, compare) {
+      const encoder = new TextEncoder()
+      const passwordBytes = encoder.encode(password)
+      const salt = jose.base64url.decode(compare.salt)
+      const params = {
+        name: "PBKDF2",
+        hash: "SHA-256",
+        salt,
+        iterations: compare.iterations,
+      }
+      const keyMaterial = await crypto.subtle.importKey(
+        "raw",
+        passwordBytes,
+        "PBKDF2",
+        false,
+        ["deriveBits"],
+      )
+      const hash = await crypto.subtle.deriveBits(params, keyMaterial, 256)
+      const hashBase64 = jose.base64url.encode(new Uint8Array(hash))
+      return hashBase64 === compare.hash
+    },
+  }
+}
+import { timingSafeEqual, randomBytes, scrypt } from "node:crypto"
+import { getRelativeUrl } from "@openauthjs/openauth/util"
+
+export function ScryptHasher(opts?: {
+  N?: number
+  r?: number
+  p?: number
+}): PasswordHasher<{
+  hash: string
+  salt: string
+  N: number
+  r: number
+  p: number
+}> {
+  const N = opts?.N ?? 16384
+  const r = opts?.r ?? 8
+  const p = opts?.p ?? 1
+
+  return {
+    async hash(password) {
+      const salt = randomBytes(16)
+      const keyLength = 32 // 256 bits
+
+      const derivedKey = await new Promise<Buffer>((resolve, reject) => {
+        scrypt(password, salt, keyLength, { N, r, p }, (err, derivedKey) => {
+          if (err) reject(err)
+          else resolve(derivedKey)
+        })
+      })
+
+      const hashBase64 = derivedKey.toString("base64")
+      const saltBase64 = salt.toString("base64")
+
+      return {
+        hash: hashBase64,
+        salt: saltBase64,
+        N,
+        r,
+        p,
+      }
+    },
+
+    async verify(password, compare) {
+      const salt = Buffer.from(compare.salt, "base64")
+      const keyLength = 32 // 256 bits
+
+      const derivedKey = await new Promise<Buffer>((resolve, reject) => {
+        scrypt(
+          password,
+          salt,
+          keyLength,
+          { N: compare.N, r: compare.r, p: compare.p },
+          (err, derivedKey) => {
+            if (err) reject(err)
+            else resolve(derivedKey)
+          },
+        )
+      })
+
+      return timingSafeEqual(derivedKey, Buffer.from(compare.hash, "base64"))
+    },
+  }
+}
diff --git a/packages/functions/src/ui/base.tsx b/packages/functions/src/ui/base.tsx
new file mode 100644
index 00000000..7183cee1
--- /dev/null
+++ b/packages/functions/src/ui/base.tsx
@@ -0,0 +1,279 @@
+/** @jsxImportSource hono/jsx */
+import { css } from "./css"
+import { type PropsWithChildren } from "hono/jsx"
+import { getTheme } from "@openauthjs/openauth/ui/theme"
+
+export function Layout(
+    props: PropsWithChildren<{
+        size?: "small",
+        page?: "root" | "password" | "popup"
+    }>,
+) {
+    const theme = getTheme()
+    function get(key: "primary" | "background" | "logo", mode: "light" | "dark") {
+        if (!theme) return
+        if (!theme[key]) return
+        if (typeof theme[key] === "string") return theme[key]
+
+        return theme[key][mode] as string | undefined
+    }
+
+    const radius = (() => {
+        if (theme?.radius === "none") return "0"
+        if (theme?.radius === "sm") return "1"
+        if (theme?.radius === "md") return "1.25"
+        if (theme?.radius === "lg") return "1.5"
+        if (theme?.radius === "full") return "1000000000001"
+        return "1"
+    })()
+
+    const script = "const DEFAULT_COLORS = ['#6A5ACD', '#E63525','#20B2AA', '#E87D58'];" +
+        "const getModulo = (value, divisor, useEvenCheck) => {" +
+        "const remainder = value % divisor;" +
+        "if (useEvenCheck && Math.floor(value / Math.pow(10, useEvenCheck) % 10) % 2 === 0) {" +
+        " return -remainder;" +
+        " }" +
+        " return remainder;" +
+        " };" +
+        "const generateColors = (name, colors = DEFAULT_COLORS) => {" +
+        "const hashCode = name.split('').reduce((acc, char) => {" +
+        "acc = ((acc << 5) - acc) + char.charCodeAt(0);" +
+        " return acc & acc;" +
+        " }, 0);" +
+        "const hash = Math.abs(hashCode);" +
+        "const numColors = colors.length;" +
+        "return Array.from({ length: 3 }, (_, index) => ({" +
+        "color: colors[(hash + index) % numColors]," +
+        "translateX: getModulo(hash * (index + 1), 4, 1)," +
+        "translateY: getModulo(hash * (index + 1), 4, 2)," +
+        " scale: 1.2 + getModulo(hash * (index + 1), 2) / 10," +
+        " rotate: getModulo(hash * (index + 1), 360, 1)" +
+        "}));" +
+        "};" +
+        "const generateFallbackAvatar = (text = 'wanjohi', size = 80, colors = DEFAULT_COLORS) => {" +
+        "  const colorData = generateColors(text, colors);" +
+        "  return '<svg viewBox=\"0 0 ' + size + ' ' + size + '\" fill=\"none\" role=\"img\" aria-describedby=\"' + text + '\" width=\"' + size + '\" height=\"' + size + '\">' +" +
+        "    '<title id=\"' + text + '\">Fallback avatar for ' + text + '</title>' +" +
+        "    '<mask id=\"mask__marble\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"' + size + '\" height=\"' + size + '\">' +" +
+        "      '<rect width=\"' + size + '\" height=\"' + size + '\" rx=\"' + (size * 2) + '\" fill=\"#FFFFFF\" />' +" +
+        "    '</mask>' +" +
+        "    '<g mask=\"url(#mask__marble)\">' +" +
+        "      '<rect width=\"' + size + '\" height=\"' + size + '\" fill=\"' + colorData[0].color + '\" />' +" +
+        "      '<path filter=\"url(#prefix__filter0_f)\" d=\"M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z\" fill=\"' + colorData[1].color + '\" transform=\"translate(' + colorData[1].translateX + ' ' + colorData[1].translateY + ') rotate(' + colorData[1].rotate + ' ' + (size / 2) + ' ' + (size / 2) + ') scale(' + colorData[1].scale + ')\" />' +" +
+        "      '<path filter=\"url(#prefix__filter0_f)\" style=\"mix-blend-mode: overlay\" d=\"M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z\" fill=\"' + colorData[2].color + '\" transform=\"translate(' + colorData[2].translateX + ' ' + colorData[2].translateY + ') rotate(' + colorData[2].rotate + ' ' + (size / 2) + ' ' + (size / 2) + ') scale(' + colorData[2].scale + ')\" />' +" +
+        "    '</g>' +" +
+        "    '<defs>' +" +
+        "      '<filter id=\"prefix__filter0_f\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">' +" +
+        "        '<feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />' +" +
+        "        '<feBlend in=\"SourceGraphic\" in2=\"BackgroundImageFix\" result=\"shape\" />' +" +
+        "        '<feGaussianBlur stdDeviation=\"7\" result=\"effect1_foregroundBlur\" />' +" +
+        "      '</filter>' +" +
+        "    '</defs>' +" +
+        "  '</svg>';" +
+        "};" +
+        "const input = document.getElementById('username');" +
+        "const avatarSpan = document.getElementById('username-icon');" +
+        "input.addEventListener('input', (e) => {" +
+        "  avatarSpan.innerHTML = generateFallbackAvatar(e.target.value);" +
+        "});";
+
+    const authWindowScript = `
+        const openAuthWindow = async (provider) => {
+          const POLL_INTERVAL = 300;
+          const BASE_URL = window.location.origin;
+          
+          const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+            navigator.userAgent
+          );
+        
+          const createDesktopWindow = (authUrl) => {
+            const config = {
+              width: 700,
+              height: 700,
+              features: "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no"
+            };
+        
+            const top = window.top.outerHeight / 2 + window.top.screenY - (config.height / 2);
+            const left = window.top.outerWidth / 2 + window.top.screenX - (config.width / 2);
+        
+            return window.open(
+              authUrl,
+              'Auth Popup',
+              \`width=\${config.width},height=\${config.height},left=\${left},top=\${top},\${config.features}\`
+            );
+          };
+        
+          const monitorAuthWindow = (targetWindow) => {
+            return new Promise((resolve, reject) => {
+              const handleAuthSuccess = (event) => {
+                if (event.origin !== BASE_URL) return;
+                
+                try {
+                  const data = JSON.parse(event.data);
+                  if (data.type === 'auth_success') {
+                    cleanup();
+                    window.location.href = window.location.origin + "/" + provider + "/callback" + data.searchParams;
+                    resolve();
+                  }
+                } catch (e) {
+                  // Ignore invalid JSON messages
+                }
+              };
+        
+            window.addEventListener('message', handleAuthSuccess);
+        
+              const timer = setInterval(() => {
+                if (targetWindow.closed) {
+                  cleanup();
+                  reject(new Error('Authentication window was closed'));
+                } 
+              }, POLL_INTERVAL);
+        
+              function cleanup() {
+                clearInterval(timer);
+                window.removeEventListener('message', handleAuthSuccess);
+                if (!targetWindow.closed) {
+                    targetWindow.location.href = 'about:blank'
+                    targetWindow.close();
+                }
+                window.focus();
+              }
+            });
+          };
+        
+          const authUrl = \`\${BASE_URL}/\${provider}/authorize\`;
+          const newWindow = isMobile ? window.open(authUrl, '_blank') : createDesktopWindow(authUrl);
+          
+          if (!newWindow) {
+            throw new Error('Failed to open authentication window');
+          }
+        
+          return monitorAuthWindow(newWindow);
+        };
+
+
+        const buttons = document.querySelectorAll('button[id^="button-"]');
+        const formRoot = document.querySelector('[data-component="form-root"]');
+
+        const setLoadingState = (activeProvider) => {
+            formRoot.setAttribute('data-disabled', 'true');
+
+            buttons.forEach(button => {
+                button.style.pointerEvents = 'none';
+
+                const provider = button.id.replace('button-', '');
+                if (provider === activeProvider) {
+                    button.setAttribute('data-loading', 'true');
+                }
+            });
+        };
+
+        const resetState = () => {
+            formRoot.removeAttribute('data-disabled');
+
+            buttons.forEach(button => {
+                button.style.pointerEvents = '';
+                button.removeAttribute('data-loading');
+            });
+        };
+        
+        buttons.forEach(button => {
+            const provider = button.id.replace('button-', '');
+
+            if (provider === "password"){
+                button.addEventListener('click', async (e) => {
+                    window.location.href = window.location.origin + "/" + provider + "/authorize";
+                })
+            } else {
+                button.addEventListener('click', async (e) => {
+                    try {
+                         setLoadingState(provider);
+                         await openAuthWindow(provider);
+                    } catch (error) {
+                        resetState();
+                        console.error(\`Authentication failed for \${provider}:\`, error);
+                    } 
+                    //     finally {
+                    //     resetState();
+                    //  }
+                }); 
+            }
+        });`;
+
+    const callbackScript = `
+        if (window.opener == null) {
+            window.location.href = "about:blank";
+        }
+
+        const searchParams = window.location.search;
+
+        try {
+            window.opener.postMessage(
+                JSON.stringify({
+                    type: 'auth_success',
+                    searchParams: searchParams
+                }), 
+                window.location.origin
+            );
+        } catch (e) {
+            console.error('Failed to send message to parent window:', e);
+        }`;
+    return (
+        <html
+            style={{
+                "--color-background-light": get("background", "light"),
+                "--color-background-dark": get("background", "dark"),
+                "--color-primary-light": get("primary", "light"),
+                "--color-primary-dark": get("primary", "dark"),
+                "--font-family": theme?.font?.family,
+                "--font-scale": theme?.font?.scale,
+                "--border-radius": radius,
+                backgroundColor: get("background", "dark"),
+            }}
+        >
+            <head>
+                <meta charset="utf-8" />
+                <title>{theme?.title || "OpenAuthJS"}</title>
+                <meta name="viewport" content="width=device-width, initial-scale=1" />
+                <link rel="icon" href={theme?.favicon} />
+                <style dangerouslySetInnerHTML={{ __html: css() }} />
+                {theme?.css && (
+                    <style dangerouslySetInnerHTML={{ __html: theme.css }} />
+                )}
+            </head>
+            <body>
+                <div data-component="root">
+                    <main data-component="center" data-size={props.size}>
+                        {props.children}
+                    </main>
+                    <section data-component="logo-footer" >
+                        <svg viewBox="0 0 498.05 70.508" xmlns="http://www.w3.org/2000/svg" height={157} width={695} >
+                            <g stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="currentColor" stroke-width="0.25mm" fill="currentColor" style="stroke:currentColor;stroke-width:0.25mm;fill:currentColor">
+                                <path
+                                    fill="url(#paint1)"
+                                    pathLength="1"
+                                    stroke="url(#paint1)"
+                                    d="M 261.23 41.65 L 212.402 41.65 Q 195.313 41.65 195.313 27.002 L 195.313 14.795 A 17.814 17.814 0 0 1 196.311 8.57 Q 199.443 0.146 212.402 0.146 L 283.203 0.146 L 283.203 14.844 L 217.236 14.844 Q 215.337 14.844 214.945 16.383 A 3.67 3.67 0 0 0 214.844 17.285 L 214.844 24.561 Q 214.844 27.002 217.236 27.002 L 266.113 27.002 Q 283.203 27.002 283.203 41.65 L 283.203 53.857 A 17.814 17.814 0 0 1 282.205 60.083 Q 279.073 68.506 266.113 68.506 L 195.313 68.506 L 195.313 53.809 L 261.23 53.809 A 3.515 3.515 0 0 0 262.197 53.688 Q 263.672 53.265 263.672 51.367 L 263.672 44.092 A 3.515 3.515 0 0 0 263.551 43.126 Q 263.128 41.65 261.23 41.65 Z M 185.547 53.906 L 185.547 68.506 L 114.746 68.506 Q 97.656 68.506 97.656 53.857 L 97.656 14.795 A 17.814 17.814 0 0 1 98.655 8.57 Q 101.787 0.146 114.746 0.146 L 168.457 0.146 Q 185.547 0.146 185.547 14.795 L 185.547 31.885 A 17.827 17.827 0 0 1 184.544 38.124 Q 181.621 45.972 170.174 46.538 A 36.906 36.906 0 0 1 168.457 46.582 L 117.188 46.582 L 117.236 51.465 Q 117.236 53.906 119.629 53.955 L 185.547 53.906 Z M 19.531 14.795 L 19.531 68.506 L 0 68.506 L 0 0.146 L 70.801 0.146 Q 87.891 0.146 87.891 14.795 L 87.891 68.506 L 68.359 68.506 L 68.359 17.236 Q 68.359 14.795 65.967 14.795 L 19.531 14.795 Z M 449.219 68.506 L 430.176 46.533 L 400.391 46.533 L 400.391 68.506 L 380.859 68.506 L 380.859 0.146 L 451.66 0.146 A 24.602 24.602 0 0 1 458.423 0.994 Q 466.007 3.166 468.021 10.907 A 25.178 25.178 0 0 1 468.75 17.236 L 468.75 31.885 A 18.217 18.217 0 0 1 467.887 37.73 Q 465.954 43.444 459.698 45.455 A 23.245 23.245 0 0 1 454.492 46.436 L 473.633 68.506 L 449.219 68.506 Z M 292.969 0 L 371.094 0.098 L 371.094 14.795 L 341.846 14.795 L 341.846 68.506 L 322.266 68.506 L 322.217 14.795 L 292.969 14.844 L 292.969 0 Z M 478.516 0.146 L 498.047 0.146 L 498.047 68.506 L 478.516 68.506 L 478.516 0.146 Z M 400.391 14.844 L 400.391 31.885 L 446.826 31.885 Q 448.726 31.885 449.117 30.345 A 3.67 3.67 0 0 0 449.219 29.443 L 449.219 17.285 Q 449.219 14.844 446.826 14.844 L 400.391 14.844 Z M 117.188 31.836 L 163.574 31.934 Q 165.528 31.895 165.918 30.355 A 3.514 3.514 0 0 0 166.016 29.492 L 166.016 17.236 Q 166.016 15.337 164.476 14.945 A 3.67 3.67 0 0 0 163.574 14.844 L 119.629 14.795 Q 117.188 14.795 117.188 17.188 L 117.188 31.836 Z" />
+                            </g>
+                            <defs>
+                                <linearGradient gradientUnits="userSpaceOnUse" id="paint1" x1="317.5" x2="314.007" y1="-51.5" y2="126">
+                                    <stop stop-color="white"></stop>
+                                    <stop offset="1" stop-opacity="0"></stop>
+                                </linearGradient>
+                            </defs>
+                        </svg>
+                    </section>
+                </div>
+                {props.page === "password" && (
+                    <script dangerouslySetInnerHTML={{ __html: script }} />
+                )}
+                {props.page === "root" && (
+                    <script dangerouslySetInnerHTML={{ __html: authWindowScript }} />
+                )}
+                {props.page === "popup" && (
+                    <script dangerouslySetInnerHTML={{ __html: callbackScript }} />
+                )}
+            </body>
+        </html>
+    )
+}
diff --git a/packages/functions/src/ui/css.ts b/packages/functions/src/ui/css.ts
new file mode 100644
index 00000000..c4eff239
--- /dev/null
+++ b/packages/functions/src/ui/css.ts
@@ -0,0 +1,586 @@
+export function css() {
+  return `
+@import url("https://unpkg.com/tailwindcss@3.4.15/src/css/preflight.css");
+
+:root {
+  --color-background-dark: #0e0e11;
+  --color-background-light: #ffffff;
+  --color-primary-dark: #6772e5;
+  --color-primary-light: #6772e5;
+  --border-radius: 0;
+
+  --color-background: var(--color-background-dark);
+  --color-primary: var(--color-primary-dark);
+
+  --spinner-size: 16px;
+  --spinner-color: #FFF;
+
+  @media (prefers-color-scheme: light) {
+    --color-background: var(--color-background-light);
+    --color-primary: var(--color-primary-light);
+  }
+
+  --color-high: oklch(
+    from var(--color-background) clamp(0, calc((l - 0.714) * -1000), 1) 0 0
+  );
+  --color-low: oklch(from var(--color-background) clamp(0, calc((l - 0.714) * 1000), 1) 0 0);
+  --lightness-high: color-mix(
+    in oklch,
+    var(--color-high) 0%,
+    oklch(var(--color-high) 0 0)
+  );
+  --lightness-low: color-mix(
+    in oklch,
+    var(--color-low) 0%,
+    oklch(var(--color-low) 0 0)
+  );
+  --font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-scale: 1;
+
+  --font-size-xs: calc(0.75rem * var(--font-scale));
+  --font-size-sm: calc(0.875rem * var(--font-scale));
+  --font-size-md: calc(1rem * var(--font-scale));
+  --font-size-lg: calc(1.125rem * var(--font-scale));
+  --font-size-xl: calc(1.25rem * var(--font-scale));
+  --font-size-2xl: calc(1.5rem * var(--font-scale));
+}
+
+html, html * {
+ margin: 0;
+ padding: 0;
+}
+
+[data-component="root"] {
+  font-family: var(--font-family);
+  background-color: var(--color-background);
+  padding: 1rem 1rem 0;
+  color: white;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  user-select: none;
+  color: var(--color-high);
+}
+
+ [data-component="logo-footer"] {
+    position: fixed;
+    bottom: -1px;
+    font-size: 100%;
+    max-width: 1440px;
+    width: 100%;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    z-index: 10;
+    overflow: hidden;
+
+    & > svg {
+        width: 100%;
+        height: 100%;
+        transform: translateY(40%);
+        opacity: 70%;
+    }
+ }
+
+[data-component="popup"] {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  gap: 5px;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.3rem;
+  line-height: 1rem;
+  font-weight: 500;
+
+  & [data-component="spinner"]{
+    --spinner-size: 24px;
+    display: block;
+  }
+}
+
+[data-component="center"] {
+  max-width: 380px;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  display: flex;
+  padding: 0 0 120px 0;
+  flex-direction: column;
+  gap: 1rem;
+
+  &[data-size="small"] {
+    width: 300px;
+  }
+}
+
+[data-component="link"] {
+  text-decoration: underline;
+  font-weight: 600;
+}
+
+[data-component="label"] {
+  display: flex;
+  gap: 0.75rem;
+  flex-direction: column;
+  font-size: var(--font-size-xs);
+}
+
+[data-component="input"] {
+  width: 100%;
+  height: 2.5rem;
+  padding: 0 1rem;
+  padding-left: 36px;
+  border: 1px solid transparent;
+  --background: oklch(
+    from var(--color-background) calc(l + (-0.06 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.03)) c h
+  );
+  background: var(--background);
+  border-color: #343434;
+  border-radius: calc(var(--border-radius) * 0.25rem);
+  font-size: 0.875rem;
+  outline: none;
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px #161616,0 0 0 4px #707070
+  }
+
+ &:user-invalid:focus {
+    box-shadow: 0 0 0 2px #161616,0 0 0 4px  #ff6369;
+  }
+
+  &:user-invalid:not(:focus) {
+    border-color: #ff6369;
+  }
+
+  @media (prefers-color-scheme: light) {
+    border-color: #e2e2e2;
+    color: #171717;
+    
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px #fcfcfc,0 0 0 4px #8f8f8f;
+     }
+
+    &:user-invalid:focus {
+        box-shadow: 0 0 0 2px #fcfcfc, 0 0 0 4px  #cd2b31;
+    }
+
+    &:user-invalid:not(:focus) {
+        border-color: #cd2b31;
+    }
+  }
+}
+
+[data-component="button"] {
+  height: 2.5rem;
+  cursor: pointer;
+  margin-top: 3px;
+  font-weight: 500;
+  font-size: var(--font-size-sm);
+  border-radius: calc(var(--border-radius) * 0.25rem);
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary);
+  color: oklch(from var(--color-primary) clamp(0, calc((l - 0.714) * -1000), 1) 0 0);
+
+  &[data-color="ghost"] {
+    background: transparent;
+    color: var(--color-high);
+    border: 1px solid
+      oklch(
+        from var(--color-background)
+          calc(clamp(0.22, l + (-0.12 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.06), 0.88)) c h
+      );
+  }
+    
+  &:focus [data-component="spinner"]{
+    display: block;
+  }
+
+  [data-slot="icon"] {
+    width: 16px;
+    height: 16px;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+[data-component="button-root"] {
+  transition-property: border-color,background,color,transform,box-shadow;
+  transition-duration: .15s;
+  transition-timing-function: ease;
+  height: 48px;
+  cursor: pointer;
+  padding: 0px 14px;
+  margin-top: 3px;
+  font-weight: 500;
+  font-size: 16px;
+  border-radius: 8px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 2px solid #00000014;
+   --spinner-color: #000;
+
+  @media (prefers-color-scheme: dark) {
+        border: 2px solid #ffffff24;
+        --spinner-color: #FFF;
+    }
+
+  &[data-color="github"] {
+    background: #24292e;
+    color: #fff;
+    border: 2px solid #1B1F22;
+    &:hover {
+      background: #434D56;
+      border: 1px solid transparent;
+    }
+     @media (prefers-color-scheme: dark) {
+        border: 1px solid transparent;
+        background: #434D56;
+        &:hover {
+          background: #24292e;
+        }
+    }
+  }
+  
+  &[data-color="discord"] {
+    background: #4445e7;
+    border: 2px solid #3836cc;
+    color: #fff;
+    &:hover {
+      background: #5865F2;
+      border: 1px solid transparent;
+    }
+    @media (prefers-color-scheme: dark) {
+        border: 1px solid transparent;
+        background: #5865F2;
+        &:hover {
+          background: #4445e7;
+        }
+    }
+  }
+
+  &:hover {
+      background:rgb(229, 229, 229);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:hover {
+      background:rgb(38, 38,38);
+    }
+  }
+
+  [data-slot="icon"] {
+    width: 20px;
+    height: 20px;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+[data-component="form"] {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+[data-loading="true"]{
+  & [data-component="spinner"]{
+      display: block;
+  }
+
+  & [data-slot="icon"] {
+    display: none;
+  }
+}
+
+[data-disabled="true"] { 
+   & button {
+     background: rgb(229,229,229) !important;
+     border: 2px solid #00000014 !important;
+     opacity: .7 !important;
+     color: inherit !important;
+     cursor: not-allowed !important;
+      @media (prefers-color-scheme: dark) {
+        background: rgb(38, 38,38) !important;
+        border: 2px solid #ffffff24 !important;
+      }
+  }
+}
+
+[data-component="form-root"] {
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  gap: 12px;
+}
+
+[data-component="form-header"] {
+  display: flex;
+  gap: 0.75rem;
+  align-items: start;
+  justify-content: center;
+  flex-direction: column;
+  color: #a0a0a0;
+  max-width: 400px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+
+  @media (prefers-color-scheme: light) {
+     color: #6f6f6f
+  }
+
+  & > hr {
+    border:0;
+    background: #282828;
+    height:2px;
+    width:100%;
+    margin-top:4px;
+
+    @media (prefers-color-scheme: light) {
+      background: #e8e8e8
+    }
+ }
+
+ & > h1 {
+    color: #ededed;
+    font-weight:500;
+    font-size: 1.25rem;
+    letter-spacing:-.020625rem;
+    line-height:1.5rem;
+    margin:0;
+    overflow-wrap:break-word;
+
+    @media (prefers-color-scheme: light) {
+      color: #171717
+    }
+  }
+}
+
+[data-component="form-header-root"] {
+  color: #FFF;
+  max-width: 400px;
+  font-weight: 700;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  line-height: 2.5rem;
+  letter-spacing: -0.049375rem;
+
+  @media (prefers-color-scheme: light) {
+     color: #000
+  }
+
+  // & > hr {
+  //   border:0;
+  //   background: #282828;
+  //   height:2px;
+  //   width:100%;
+  //   margin-top:4px;
+
+  //   @media (prefers-color-scheme: light) {
+  //     background: #e8e8e8
+  //   }
+  // }
+}
+    
+[data-component="input-container"] {
+  display: flex;
+  gap: 0.5rem;
+  align-items: start;
+  justify-content: center;
+  flex-direction: column;
+  color: #a0a0a0;
+  max-width: 400px;
+  font-weight: 400px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  
+  @media (prefers-color-scheme: light) {
+     color: #6f6f6f
+  }
+
+ & > small {
+   color: #ff6369;
+   display: block;
+   line-height: 1rem;
+   font-weight: 400;
+   font-size: 0.75rem;
+
+    @media (prefers-color-scheme: light) {
+        color: #cd2b31;
+    }
+ }
+}
+
+[data-error="true"] {
+ & input {
+     border-color: #ff6369;
+    &:focus {
+        box-shadow: 0 0 0 2px #161616,0 0 0 4px  #ff6369;
+        border-color: transparent;
+    }
+
+    @media (prefers-color-scheme: light) {
+        border-color: #cd2b31;
+        :focus {
+            box-shadow: 0 0 0 2px #fcfcfc, 0 0 0 4px  #cd2b31;
+            border-color: transparent;
+        }
+    }
+ }
+}
+
+[data-component="input-wrapper"] {
+  position: relative;
+  width:100%;
+}
+  
+[data-component="input-icon"] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 8px;
+  width: 20px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  & > svg {
+        width:20px;
+        height:20px;
+        display:block;
+        max-width:100%;
+    }
+}
+
+input:-webkit-autofill,
+  input:-webkit-autofill:focus {
+    transition: background-color 0s 600000s, color 0s 600000s !important;
+}
+
+
+[data-component="spinner"] {
+    height: var(--spinner-size,20px);
+    width: var(--spinner-size,20px);
+    margin-left: calc(var(--spinner-size,20px)*-1px);
+    display: none;
+
+    & > div {
+        position: relative;
+        top: 50%;
+        left: 50%;
+        height: var(--spinner-size,20px);
+        width: var(--spinner-size,20px);
+    }
+    
+    & > div > div {
+        animation: spin 1.2s linear infinite;
+        background: var(--spinner-color);
+        border-radius: 9999px;
+        height: 8%;
+        left: -10%;
+        position: absolute;
+        top: -3.9%;
+        width: 24%;
+    }
+
+    & > div > div:first-child {
+        animation-delay: -1.2s;
+        transform: rotate(.0001deg) translate(146%);
+    }
+    
+    & > div > div:nth-child(2) {
+        animation-delay: -1.1s;
+        transform: rotate(30deg) translate(146%);
+    }
+
+   & > div > div:nth-child(3) {
+        animation-delay: -1s;
+        transform: rotate(60deg) translate(146%);
+    }
+
+    & > div > div:nth-child(4) {
+        animation-delay: -.9s;
+        transform: rotate(90deg) translate(146%);
+    }
+
+   & > div > div:nth-child(5) {
+        animation-delay: -.8s;
+        transform: rotate(120deg) translate(146%);
+    }
+
+   & > div > div:nth-child(6) {
+        animation-delay: -.7s;
+        transform: rotate(150deg) translate(146%);
+    }
+    
+    & > div > div:nth-child(7) {
+        animation-delay: -.6s;
+        transform: rotate(180deg) translate(146%);
+    }
+
+    & > div > div:nth-child(8) {
+        animation-delay: -.5s;
+        transform: rotate(210deg) translate(146%);
+    }
+        
+    & > div > div:nth-child(9) {
+        animation-delay: -.4s;
+        transform: rotate(240deg) translate(146%);
+    }
+    
+    & > div > div:nth-child(10) {
+        animation-delay: -.3s;
+        transform: rotate(270deg) translate(146%);
+    }
+        
+    & > div > div:nth-child(11) {
+        animation-delay: -.2s;
+        transform: rotate(300deg) translate(146%);
+    }
+        
+    & > div > div:nth-child(12) {
+        animation-delay: -.1s;
+        transform: rotate(330deg) translate(146%);
+    }
+}
+
+@keyframes spin {
+0% {
+    opacity: 1;
+}
+
+100% {
+    opacity: .15;
+}
+
+}
+
+    `
+}
\ No newline at end of file
diff --git a/packages/functions/src/ui/password.tsx b/packages/functions/src/ui/password.tsx
new file mode 100644
index 00000000..ee27b920
--- /dev/null
+++ b/packages/functions/src/ui/password.tsx
@@ -0,0 +1,481 @@
+/** @jsxImportSource hono/jsx */
+import {
+  type PasswordChangeError,
+  type PasswordConfig,
+  type PasswordLoginError,
+  type PasswordRegisterError,
+} from "./adapters/password"
+// import { Layout } from "@openauthjs/openauth/ui/base"
+import { Layout } from "./base"
+import "@openauthjs/openauth/ui/form"
+// import { FormAlert } from "@openauthjs/openauth/ui/form"
+
+const DEFAULT_COPY = {
+  error_email_taken: "There is already an account with this email.",
+  error_username_taken: "There is already an account with this username.",
+  error_invalid_code: "Code is incorrect.",
+  error_invalid_email: "Email is not valid.",
+  error_invalid_password: "Password is incorrect.",
+  error_invalid_username: "Username must only contain numbers and small letters.",
+  error_password_mismatch: "Passwords do not match.",
+  register_title: "Welcome to the app",
+  register_description: "Sign in with your email",
+  login_title: "Welcome to the app",
+  login_description: "Sign in with your email",
+  register: "Register",
+  register_prompt: "Don't have an account?",
+  login_prompt: "Already have an account?",
+  login: "Login",
+  change_prompt: "Forgot your password?",
+  change: "Well that sucks",
+  code_resend: "Resend code",
+  code_return: "Back to",
+  logo: "A",
+  input_email: "john@doe.com",
+  input_password: "●●●●●●●●●●●",
+  input_code: "●●●●●●",
+  input_username: "john",
+  input_repeat: "●●●●●●●●●●●",
+  button_continue: "Continue",
+} satisfies {
+  [key in `error_${| PasswordLoginError["type"]
+  | PasswordRegisterError["type"]
+  | PasswordChangeError["type"]}`]: string
+} & Record<string, string>
+
+export type PasswordUICopy = typeof DEFAULT_COPY
+
+export interface PasswordUIOptions {
+  sendCode: PasswordConfig["sendCode"]
+  copy?: Partial<PasswordUICopy>
+}
+
+export function PasswordUI(input: PasswordUIOptions) {
+  const copy = {
+    ...DEFAULT_COPY,
+    ...input.copy,
+  }
+  return {
+    sendCode: input.sendCode,
+    login: async (_req, form, error): Promise<Response> => {
+      const emailError = ["invalid_email", "email_taken"].includes(
+        error?.type || "",
+      )
+      const passwordError = ["invalid_password", "password_mismatch"].includes(
+        error?.type || "",
+      )
+      const jsx = (
+        <Layout page="password">
+          <div data-component="form-header">
+            <h1>Login</h1>
+            <span>
+              {copy.register_prompt}{" "}
+              <a data-component="link" href="register">
+                {copy.register}
+              </a>
+            </span>
+            <hr />
+          </div>
+          <form data-component="form" method="post">
+            {/* <FormAlert message={error?.type && copy?.[`error_${error.type}`]} /> */}
+            <div
+              data-component="input-container"
+            >
+              <span>Email</span>
+              <div data-error={emailError} data-component="input-wrapper">
+                <span data-component="input-icon">
+                  <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
+                    <path d="M7 9l5 3.5L17 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    </path>
+                    <path d="M2 17V7a2 2 0 012-2h16a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2z" stroke="currentColor" stroke-width="1.5">
+                    </path>
+                  </svg>
+                </span>
+                <input
+                  data-component="input"
+                  type="email"
+                  name="email"
+                  required
+                  placeholder={copy.input_email}
+                  autofocus={!error}
+                  value={form?.get("email")?.toString()}
+                />
+              </div>
+              <small>{error?.type && emailError && copy?.[`error_${error.type}`]}</small>
+            </div>
+            <div
+              data-component="input-container"
+            >
+              <span>Password</span>
+              <div data-error={passwordError} data-component="input-wrapper">
+                <span data-component="input-icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M12 16.5v-2m-7.732 4.345c.225 1.67 1.608 2.979 3.292 3.056c1.416.065 2.855.099 4.44.099s3.024-.034 4.44-.1c1.684-.076 3.067-1.385 3.292-3.055c.147-1.09.268-2.207.268-3.345s-.121-2.255-.268-3.345c-.225-1.67-1.608-2.979-3.292-3.056A95 95 0 0 0 12 9c-1.585 0-3.024.034-4.44.1c-1.684.076-3.067 1.385-3.292 3.055C4.12 13.245 4 14.362 4 15.5s.121 2.255.268 3.345" /><path d="M7.5 9V6.5a4.5 4.5 0 0 1 9 0V9" /></g></svg>
+                </span>
+                <input
+                  data-component="input"
+                  autofocus={error?.type === "invalid_password"}
+                  required
+                  type="password"
+                  name="password"
+                  placeholder={copy.input_password}
+                  autoComplete="current-password"
+                />
+              </div>
+              <small>{error?.type && passwordError && copy?.[`error_${error.type}`]}</small>
+            </div>
+            <button data-component="button">
+              <div data-component="spinner">
+                <div>
+                  {new Array(12).fill(0).map((i, k) => (
+                    <div key={k} />
+                  ))}
+                </div>
+              </div>
+              {copy.button_continue}
+            </button>
+            <div style={{ padding: "2px 0" }} data-component="form-header">
+              <hr />
+              <span>
+                {copy.change_prompt}{" "}
+                <a data-component="link" href="change">
+                  {copy.change}
+                </a>
+              </span>
+            </div>
+          </form>
+        </Layout>
+      )
+      return new Response(jsx.toString(), {
+        status: error ? 401 : 200,
+        headers: {
+          "Content-Type": "text/html",
+        },
+      })
+    },
+    register: async (_req, state, form, error): Promise<Response> => {
+      const emailError = ["invalid_email", "email_taken"].includes(
+        error?.type || "",
+      )
+      const passwordError = ["invalid_password", "password_mismatch"].includes(
+        error?.type || "",
+      )
+
+      //Just in case the server does it
+      const codeError = ["invalid_code"].includes(
+        error?.type || "",
+      )
+
+      const usernameError = ["invalid_username", "username_taken"].includes(
+        error?.type || "",
+      );
+
+      const jsx = (
+        <Layout page="password">
+          <div data-component="form-header">
+            <h1>Register</h1>
+            <span>
+              {copy.login_prompt}{" "}
+              <a data-component="link" href="authorize">
+                {copy.login}
+              </a>
+            </span>
+            <hr></hr>
+          </div>
+          <form data-component="form" method="post">
+            {/* <FormAlert message={error?.type && copy?.[`error_${error.type}`]} /> */}
+            {state.type === "start" && (
+              <>
+                <input type="hidden" name="action" value="register" />
+                <div
+                  data-component="input-container"
+                >
+                  <span>Email</span>
+                  <div data-error={emailError} data-component="input-wrapper">
+                    <span data-component="input-icon">
+                      <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
+                        <path d="M7 9l5 3.5L17 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                        </path>
+                        <path d="M2 17V7a2 2 0 012-2h16a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2z" stroke="currentColor" stroke-width="1.5">
+                        </path>
+                      </svg>
+                    </span>
+                    <input
+                      data-component="input"
+                      autofocus={!error || emailError}
+                      type="email"
+                      name="email"
+                      value={!emailError ? form?.get("email")?.toString() : ""}
+                      required
+                      placeholder={copy.input_email}
+                    />
+                  </div>
+                  <small>{error?.type && emailError && copy?.[`error_${error.type}`]}</small>
+                </div>
+                <div
+                  data-component="input-container"
+                >
+                  <span>Username</span>
+                  <div data-error={usernameError} data-component="input-wrapper">
+                    <span id="username-icon" data-component="input-icon">
+                      <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4.271 18.346S6.5 15.5 12 15.5s7.73 2.846 7.73 2.846M12 12a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+                    </span>
+                    <input
+                      id="username"
+                      data-component="input"
+                      autofocus={usernameError}
+                      type="text"
+                      name="username"
+                      placeholder={copy.input_username}
+                      required
+                      value={
+                        !usernameError ? form?.get("username")?.toString() : ""
+                      }
+                    />
+                  </div>
+                  <small>{error?.type && usernameError && copy?.[`error_${error.type}`]}</small>
+                </div>
+                <div
+                  data-component="input-container"
+                >
+                  <span>Password</span>
+                  <div data-error={passwordError} data-component="input-wrapper">
+                    <span data-component="input-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M12 16.5v-2m-7.732 4.345c.225 1.67 1.608 2.979 3.292 3.056c1.416.065 2.855.099 4.44.099s3.024-.034 4.44-.1c1.684-.076 3.067-1.385 3.292-3.055c.147-1.09.268-2.207.268-3.345s-.121-2.255-.268-3.345c-.225-1.67-1.608-2.979-3.292-3.056A95 95 0 0 0 12 9c-1.585 0-3.024.034-4.44.1c-1.684.076-3.067 1.385-3.292 3.055C4.12 13.245 4 14.362 4 15.5s.121 2.255.268 3.345" /><path d="M7.5 9V6.5a4.5 4.5 0 0 1 9 0V9" /></g></svg>
+                    </span>
+                    <input
+                      data-component="input"
+                      id="password"
+                      autofocus={passwordError}
+                      type="password"
+                      name="password"
+                      placeholder={copy.input_password}
+                      required
+                      value={
+                        !passwordError ? form?.get("password")?.toString() : ""
+                      }
+                      autoComplete="new-password"
+                    />
+                  </div>
+                  <small>{error?.type && passwordError && copy?.[`error_${error.type}`]}</small>
+                </div>
+                <button data-component="button">
+                  <div data-component="spinner">
+                    <div>
+                      {new Array(12).fill(0).map((i, k) => (
+                        <div key={k} />
+                      ))}
+                    </div>
+                  </div>
+                  {copy.button_continue}
+                </button>
+              </>
+            )}
+
+            {state.type === "code" && (
+              <>
+                <input type="hidden" name="action" value="verify" />
+                <div
+                  data-component="input-container"
+                >
+                  <span>Code</span>
+                  <div data-error={codeError} data-component="input-wrapper">
+                    <span data-component="input-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M2.43 8.25a1 1 0 0 1 1-1h.952c1.063 0 1.952.853 1.952 1.938v6.562a1 1 0 1 1-2 0v-6.5H3.43a1 1 0 0 1-1-1m5.714 0a1 1 0 0 1 1-1h2.857c1.064 0 1.953.853 1.953 1.938v1.874A1.945 1.945 0 0 1 12 13h-1.857v1.75h2.81a1 1 0 1 1 0 2h-2.858a1.945 1.945 0 0 1-1.952-1.937v-1.876c0-1.084.889-1.937 1.952-1.937h1.858V9.25h-2.81a1 1 0 0 1-1-1m7.619 0a1 1 0 0 1 1-1h2.857c1.063 0 1.953.853 1.953 1.938v5.624a1.945 1.945 0 0 1-1.953 1.938h-2.857a1 1 0 1 1 0-2h2.81V13h-2.81a1 1 0 1 1 0-2h2.81V9.25h-2.81a1 1 0 0 1-1-1" clip-rule="evenodd" /></svg>
+                    </span>
+                    <input
+                      data-component="input"
+                      autofocus
+                      name="code"
+                      minLength={6}
+                      maxLength={6}
+                      required
+                      placeholder={copy.input_code}
+                      autoComplete="one-time-code"
+                    />
+                  </div>
+                  <small>{error?.type && codeError && copy?.[`error_${error.type}`]}</small>
+                </div>
+                <button data-component="button">
+                  <div data-component="spinner">
+                    <div>
+                      {new Array(12).fill(0).map((i, k) => (
+                        <div key={k} />
+                      ))}
+                    </div>
+                  </div>
+                  {copy.button_continue}
+                </button>
+              </>
+            )}
+          </form>
+        </Layout>
+      ) as string
+      return new Response(jsx.toString(), {
+        headers: {
+          "Content-Type": "text/html",
+        },
+      })
+    },
+    change: async (_req, state, form, error): Promise<Response> => {
+      const passwordError = ["invalid_password", "password_mismatch"].includes(
+        error?.type || "",
+      )
+
+      const emailError = ["invalid_email", "email_taken"].includes(
+        error?.type || "",
+      )
+
+      const codeError = ["invalid_code"].includes(
+        error?.type || "",
+      )
+
+      const jsx = (
+        <Layout page="password">
+          <div data-component="form-header">
+            <h1>Forgot Password</h1>
+            {state.type != "update" && (
+              <span>
+                Suddenly had an epiphany?{" "}
+                <a data-component="link" href="authorize">
+                  {copy.login}
+                </a>
+              </span>
+            )}
+            <hr />
+          </div>
+          <form data-component="form" method="post" replace>
+            {/* <FormAlert message={error?.type && copy?.[`error_${error.type}`]} /> */}
+            {state.type === "start" && (
+              <>
+                <input type="hidden" name="action" value="code" />
+                <div
+                  data-component="input-container"
+                >
+                  <span>Email</span>
+                  <div data-error={emailError} data-component="input-wrapper">
+                    <span data-component="input-icon">
+                      <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
+                        <path d="M7 9l5 3.5L17 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                        </path>
+                        <path d="M2 17V7a2 2 0 012-2h16a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2z" stroke="currentColor" stroke-width="1.5">
+                        </path>
+                      </svg>
+                    </span>
+                    <input
+                      data-component="input"
+                      autofocus
+                      type="email"
+                      name="email"
+                      required
+                      value={form?.get("email")?.toString()}
+                      placeholder={copy.input_email}
+                    />
+                  </div>
+                  <small>{error?.type && emailError && copy?.[`error_${error.type}`]}</small>
+                </div>
+              </>
+            )}
+            {state.type === "code" && (
+              <>
+                <input type="hidden" name="action" value="verify" />
+                <div
+                  data-component="input-container"
+                >
+                  <span>Code</span>
+                  <div data-error={codeError} data-component="input-wrapper">
+                    <span data-component="input-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M2.43 8.25a1 1 0 0 1 1-1h.952c1.063 0 1.952.853 1.952 1.938v6.562a1 1 0 1 1-2 0v-6.5H3.43a1 1 0 0 1-1-1m5.714 0a1 1 0 0 1 1-1h2.857c1.064 0 1.953.853 1.953 1.938v1.874A1.945 1.945 0 0 1 12 13h-1.857v1.75h2.81a1 1 0 1 1 0 2h-2.858a1.945 1.945 0 0 1-1.952-1.937v-1.876c0-1.084.889-1.937 1.952-1.937h1.858V9.25h-2.81a1 1 0 0 1-1-1m7.619 0a1 1 0 0 1 1-1h2.857c1.063 0 1.953.853 1.953 1.938v5.624a1.945 1.945 0 0 1-1.953 1.938h-2.857a1 1 0 1 1 0-2h2.81V13h-2.81a1 1 0 1 1 0-2h2.81V9.25h-2.81a1 1 0 0 1-1-1" clip-rule="evenodd" /></svg>
+                    </span>
+                    <input
+                      data-component="input"
+                      autofocus
+                      name="code"
+                      minLength={6}
+                      maxLength={6}
+                      required
+                      placeholder={copy.input_code}
+                      autoComplete="one-time-code"
+                    />
+                  </div>
+                  <small>{error?.type && codeError && copy?.[`error_${error.type}`]}</small>
+                </div>
+              </>
+            )}
+            {state.type === "update" && (
+              <>
+                <input type="hidden" name="action" value="update" />
+                <div
+                  data-component="input-container"
+                >
+                  <span>Password</span>
+                  <div data-error={passwordError} data-component="input-wrapper">
+                    <span data-component="input-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M12 16.5v-2m-7.732 4.345c.225 1.67 1.608 2.979 3.292 3.056c1.416.065 2.855.099 4.44.099s3.024-.034 4.44-.1c1.684-.076 3.067-1.385 3.292-3.055c.147-1.09.268-2.207.268-3.345s-.121-2.255-.268-3.345c-.225-1.67-1.608-2.979-3.292-3.056A95 95 0 0 0 12 9c-1.585 0-3.024.034-4.44.1c-1.684.076-3.067 1.385-3.292 3.055C4.12 13.245 4 14.362 4 15.5s.121 2.255.268 3.345" /><path d="M7.5 9V6.5a4.5 4.5 0 0 1 9 0V9" /></g></svg>
+                    </span>
+                    <input
+                      data-component="input"
+                      autofocus
+                      type="password"
+                      name="password"
+                      placeholder={copy.input_password}
+                      required
+                      value={
+                        !passwordError ? form?.get("password")?.toString() : ""
+                      }
+                      autoComplete="new-password"
+                    />
+                  </div>
+                  <small>{error?.type && passwordError && copy?.[`error_${error.type}`]}</small>
+                </div>
+                <div
+                  data-component="input-container"
+                >
+                  <span>Confirm Password</span>
+                  <div data-error={passwordError} data-component="input-wrapper">
+                    <span data-component="input-icon">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M12 16.5v-2m-7.732 4.345c.225 1.67 1.608 2.979 3.292 3.056c1.416.065 2.855.099 4.44.099s3.024-.034 4.44-.1c1.684-.076 3.067-1.385 3.292-3.055c.147-1.09.268-2.207.268-3.345s-.121-2.255-.268-3.345c-.225-1.67-1.608-2.979-3.292-3.056A95 95 0 0 0 12 9c-1.585 0-3.024.034-4.44.1c-1.684.076-3.067 1.385-3.292 3.055C4.12 13.245 4 14.362 4 15.5s.121 2.255.268 3.345" /><path d="M7.5 9V6.5a4.5 4.5 0 0 1 9 0V9" /></g></svg>
+                    </span>
+                    <input
+                      data-component="input"
+                      type="password"
+                      name="repeat"
+                      required
+                      value={
+                        !passwordError ? form?.get("password")?.toString() : ""
+                      }
+                      placeholder={copy.input_repeat}
+                      autoComplete="new-password"
+                    />
+                  </div>
+                  <small>{error?.type && passwordError && copy?.[`error_${error.type}`]}</small>
+                </div>
+              </>
+            )}
+            <button data-component="button">
+              <div data-component="spinner">
+                <div>
+                  {new Array(12).fill(0).map((i, k) => (
+                    <div key={k} />
+                  ))}
+                </div>
+              </div>
+              {copy.button_continue}
+            </button>
+          </form>
+          {state.type === "code" && (
+            <form method="post">
+              <input type="hidden" name="action" value="code" />
+              <input type="hidden" name="email" value={state.email} />
+            </form>
+          )}
+        </Layout>
+      )
+      return new Response(jsx.toString(), {
+        status: error ? 400 : 200,
+        headers: {
+          "Content-Type": "text/html",
+        },
+      })
+    },
+  } satisfies PasswordConfig
+}
diff --git a/packages/functions/src/ui/select.tsx b/packages/functions/src/ui/select.tsx
new file mode 100644
index 00000000..e358fcba
--- /dev/null
+++ b/packages/functions/src/ui/select.tsx
@@ -0,0 +1,122 @@
+/** @jsxImportSource hono/jsx */
+
+import { Layout } from "./base"
+
+export interface SelectProps {
+    providers?: Record<
+        string,
+        {
+            hide?: boolean
+            display?: string
+        }
+    >
+}
+
+export function Select(props?: SelectProps) {
+    return async (
+        providers: Record<string, string>,
+        _req: Request,
+    ): Promise<Response> => {
+        const jsx = (
+            <Layout page="root">
+                <div data-component="form-header-root">
+                    <h1>Welcome to Nestri</h1>
+                </div>
+                <div
+                    // data-disabled="true"
+                    data-component="form-root">
+                    {Object.entries(providers).map(([key, type]) => {
+                        const match = props?.providers?.[key]
+                        if (match?.hide) return
+                        const icon = ICON[key]
+                        return (
+                            <button
+                                id={`button-${key}`}
+                                data-component="button-root"
+                                // data-loading={key == "password" && "true"}
+                                data-color={key}
+                            >
+                                {icon && (
+                                    <>
+                                        <div data-component="spinner">
+                                            <div>
+                                                {new Array(12).fill(0).map((i, k) => (
+                                                    <div key={k} />
+                                                ))}
+                                            </div>
+                                        </div>
+                                        <i data-slot="icon">{icon}</i>
+                                    </>
+                                )}
+                                Continue with {match?.display || DISPLAY[type] || type}
+                            </button>
+                        )
+                    })}
+                </div>
+            </Layout>
+        )
+
+        return new Response(jsx.toString(), {
+            headers: {
+                "Content-Type": "text/html",
+            },
+        })
+    }
+}
+
+const DISPLAY: Record<string, string> = {
+    twitch: "Twitch",
+    google: "Google",
+    github: "GitHub",
+    discord: "Discord",
+    password: "Password",
+}
+
+const ICON: Record<string, any> = {
+    code: (
+        <svg
+            fill="currentColor"
+            viewBox="0 0 52 52"
+            data-name="Layer 1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M8.55,36.91A6.55,6.55,0,1,1,2,43.45,6.54,6.54,0,0,1,8.55,36.91Zm17.45,0a6.55,6.55,0,1,1-6.55,6.54A6.55,6.55,0,0,1,26,36.91Zm17.45,0a6.55,6.55,0,1,1-6.54,6.54A6.54,6.54,0,0,1,43.45,36.91ZM8.55,19.45A6.55,6.55,0,1,1,2,26,6.55,6.55,0,0,1,8.55,19.45Zm17.45,0A6.55,6.55,0,1,1,19.45,26,6.56,6.56,0,0,1,26,19.45Zm17.45,0A6.55,6.55,0,1,1,36.91,26,6.55,6.55,0,0,1,43.45,19.45ZM8.55,2A6.55,6.55,0,1,1,2,8.55,6.54,6.54,0,0,1,8.55,2ZM26,2a6.55,6.55,0,1,1-6.55,6.55A6.55,6.55,0,0,1,26,2ZM43.45,2a6.55,6.55,0,1,1-6.54,6.55A6.55,6.55,0,0,1,43.45,2Z"
+                fill-rule="evenodd"
+            />
+        </svg>
+    ),
+    password: (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18 16.663a3.5 3.5 0 0 1-1.373-1.163a3.5 3.5 0 0 1-.627-2a3.5 3.5 0 1 1 4.5 3.355V17l1.146 1.146a.5.5 0 0 1 0 .708L20.5 20l1.161 1.161a.5.5 0 0 1 .015.692l-1.823 1.984a.5.5 0 0 1-.722.015l-.985-.984a.5.5 0 0 1-.146-.354zM20.5 13a1 1 0 1 0-2 0a1 1 0 0 0 2 0M12 22.001c1.969 0 3.64-.354 5-1.069v-1.76c-1.223.883-2.88 1.33-5 1.33c-2.738 0-4.704-.747-5.957-2.214a2.25 2.25 0 0 1-.54-1.462v-.577a.75.75 0 0 1 .75-.75h9.215a4.5 4.5 0 0 1-.44-1.5H6.252a2.25 2.25 0 0 0-2.25 2.25v.578c0 .892.32 1.756.9 2.435c1.565 1.834 3.952 2.74 7.097 2.74m0-19.996a5 5 0 1 1 0 10a5 5 0 0 1 0-10m0 1.5a3.5 3.5 0 1 0 0 7a3.5 3.5 0 0 0 0-7" /></svg>
+        // <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M12 16.5v-2m-7.732 4.345c.225 1.67 1.608 2.979 3.292 3.056c1.416.065 2.855.099 4.44.099s3.024-.034 4.44-.1c1.684-.076 3.067-1.385 3.292-3.055c.147-1.09.268-2.207.268-3.345s-.121-2.255-.268-3.345c-.225-1.67-1.608-2.979-3.292-3.056A95 95 0 0 0 12 9c-1.585 0-3.024.034-4.44.1c-1.684.076-3.067 1.385-3.292 3.055C4.12 13.245 4 14.362 4 15.5s.121 2.255.268 3.345" /><path d="M7.5 9V6.5a4.5 4.5 0 0 1 9 0V9" /></g></svg>
+    ),
+    twitch: (
+        <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <path
+                fill="currentColor"
+                d="M40.1 32L10 108.9v314.3h107V480h60.2l56.8-56.8h87l117-117V32H40.1zm357.8 254.1L331 353H224l-56.8 56.8V353H76.9V72.1h321v214zM331 149v116.9h-40.1V149H331zm-107 0v116.9h-40.1V149H224z"
+            ></path>
+        </svg>
+    ),
+    google: (
+        <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
+            <path
+                fill="currentColor"
+                d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+            ></path>
+        </svg>
+    ),
+    github: (
+        <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+            <path
+                fill="currentColor"
+                d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+            ></path>
+        </svg>
+    ),
+    discord: (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0a12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055a20.03 20.03 0 0 0 5.993 2.98a.078.078 0 0 0 .084-.026a13.83 13.83 0 0 0 1.226-1.963a.074.074 0 0 0-.041-.104a13.201 13.201 0 0 1-1.872-.878a.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028a19.963 19.963 0 0 0 6.002-2.981a.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028M8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38c0-1.312.956-2.38 2.157-2.38c1.21 0 2.176 1.077 2.157 2.38c0 1.312-.956 2.38-2.157 2.38m7.975 0c-1.183 0-2.157-1.069-2.157-2.38c0-1.312.955-2.38 2.157-2.38c1.21 0 2.176 1.077 2.157 2.38c0 1.312-.946 2.38-2.157 2.38" />
+        </svg>
+    )
+}
diff --git a/packages/functions/src/utils.ts b/packages/functions/src/utils.ts
new file mode 100644
index 00000000..15b7f0e2
--- /dev/null
+++ b/packages/functions/src/utils.ts
@@ -0,0 +1,75 @@
+export const handleGithub = async (accessKey: string) => {
+    const headers = {
+        Authorization: `token ${accessKey}`,
+        Accept: "application/vnd.github.v3+json",
+        "User-Agent": "Nestri"
+    };
+
+    try {
+        const [emails, user] = await Promise.all([
+            fetch("https://api.github.com/user/emails", { headers }).then(r => {
+                if (!r.ok) throw new Error(`Failed to fetch emails: ${r.status}`);
+                return r.json();
+            }),
+            fetch("https://api.github.com/user", { headers }).then(r => {
+                if (!r.ok) throw new Error(`Failed to fetch user: ${r.status}`);
+                return r.json();
+            })
+        ]);
+
+        const primaryEmail = emails.find((email: { primary: boolean }) => email.primary);
+
+        if (!primaryEmail.verified) {
+            throw new Error("Email not verified");
+        }
+        // console.log("raw user", user)
+
+        const { email, primary, verified } = primaryEmail;
+
+        return {
+            primary: { email, primary, verified },
+            avatar: user.avatar_url,
+            username: user.name ?? user.login
+        };
+    } catch (error) {
+        console.error('GitHub OAuth error:', error);
+        throw error;
+    }
+}
+
+export const handleDiscord = async (accessKey: string) => {
+    try {
+        const response = await fetch("https://discord.com/api/v10/users/@me", {
+            headers: {
+                Authorization: `Bearer ${accessKey}`,
+                "Content-Type": "application/json",
+            },
+        });
+
+        if (!response.ok) {
+            throw new Error(`Discord API error: ${response.status}`);
+        }
+
+        const user = await response.json();
+        // console.log("raw user", user)
+        if (!user.verified) {
+            throw new Error("Email not verified");
+        }
+
+        return {
+            primary: {
+                email: user.email,
+                verified: user.verified,
+                primary: true
+            },
+            avatar: user.avatar
+                ? `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`
+                : null,
+            username: user.global_name ?? user.username
+        };
+    } catch (error) {
+        console.error('Discord OAuth error:', error);
+        throw error;
+    }
+
+}
\ No newline at end of file
diff --git a/packages/functions/sst-env.d.ts b/packages/functions/sst-env.d.ts
index e31f9fc8..e0d209a9 100644
--- a/packages/functions/sst-env.d.ts
+++ b/packages/functions/sst-env.d.ts
@@ -11,6 +11,22 @@ declare module "sst" {
       "type": "random.index/randomString.RandomString"
       "value": string
     }
+    "DiscordClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "DiscordClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "InstantAdminToken": {
       "type": "sst.sst.Secret"
       "value": string
diff --git a/packages/functions/tsconfig.json b/packages/functions/tsconfig.json
index 238655f2..e5a2d1f5 100644
--- a/packages/functions/tsconfig.json
+++ b/packages/functions/tsconfig.json
@@ -1,27 +1,27 @@
 {
   "compilerOptions": {
     // Enable latest features
-    "lib": ["ESNext", "DOM"],
+    "lib": [
+      "ESNext",
+      "DOM"
+    ],
     "target": "ESNext",
     "module": "ESNext",
     "moduleDetection": "force",
     "jsx": "react-jsx",
     "allowJs": true,
-
     // Bundler mode
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "noEmit": true,
-
     // Best practices
     "strict": true,
     "skipLibCheck": true,
     "noFallthroughCasesInSwitch": true,
-
     // Some stricter flags (disabled by default)
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
   }
-}
+}
\ No newline at end of file
diff --git a/packages/input/sst-env.d.ts b/packages/input/sst-env.d.ts
index f90ea1f4..002938bb 100644
--- a/packages/input/sst-env.d.ts
+++ b/packages/input/sst-env.d.ts
@@ -21,6 +21,22 @@ declare module "sst" {
     "CloudflareAuthKV": {
       "type": "sst.cloudflare.Kv"
     }
+    "DiscordClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "DiscordClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "InstantAdminToken": {
       "type": "sst.sst.Secret"
       "value": string
diff --git a/packages/moq/sst-env.d.ts b/packages/moq/sst-env.d.ts
index f90ea1f4..002938bb 100644
--- a/packages/moq/sst-env.d.ts
+++ b/packages/moq/sst-env.d.ts
@@ -21,6 +21,22 @@ declare module "sst" {
     "CloudflareAuthKV": {
       "type": "sst.cloudflare.Kv"
     }
+    "DiscordClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "DiscordClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "InstantAdminToken": {
       "type": "sst.sst.Secret"
       "value": string
diff --git a/packages/ui/sst-env.d.ts b/packages/ui/sst-env.d.ts
index f90ea1f4..002938bb 100644
--- a/packages/ui/sst-env.d.ts
+++ b/packages/ui/sst-env.d.ts
@@ -21,6 +21,22 @@ declare module "sst" {
     "CloudflareAuthKV": {
       "type": "sst.cloudflare.Kv"
     }
+    "DiscordClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "DiscordClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "InstantAdminToken": {
       "type": "sst.sst.Secret"
       "value": string
diff --git a/sst-env.d.ts b/sst-env.d.ts
index e31f9fc8..e0d209a9 100644
--- a/sst-env.d.ts
+++ b/sst-env.d.ts
@@ -11,6 +11,22 @@ declare module "sst" {
       "type": "random.index/randomString.RandomString"
       "value": string
     }
+    "DiscordClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "DiscordClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientID": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
+    "GithubClientSecret": {
+      "type": "sst.sst.Secret"
+      "value": string
+    }
     "InstantAdminToken": {
       "type": "sst.sst.Secret"
       "value": string