From e94d9f8727578648a7e9c7583c969d51f29cd651 Mon Sep 17 00:00:00 2001
From: BimaAdi
User id: {props.userId}
+Username: {props.username}
+ + > + ); +}; + +export default Page; diff --git a/nextjs-pages/username-and-password-with-trpc/pages/login.tsx b/nextjs-pages/username-and-password-with-trpc/pages/login.tsx new file mode 100644 index 0000000..6ea832f --- /dev/null +++ b/nextjs-pages/username-and-password-with-trpc/pages/login.tsx @@ -0,0 +1,79 @@ +import { useRouter } from "next/router"; +import { auth } from "@/auth/lucia"; +import { useState } from "react"; + +import Link from "next/link"; + +import type { GetServerSidePropsContext, GetServerSidePropsResult } from "next"; + +export const getServerSideProps = async ( + context: GetServerSidePropsContext +): Promise{errorMessage}
} + Create an account + > + ); +}; + +export default Page; diff --git a/nextjs-pages/username-and-password-with-trpc/pages/signup.tsx b/nextjs-pages/username-and-password-with-trpc/pages/signup.tsx new file mode 100644 index 0000000..25344e6 --- /dev/null +++ b/nextjs-pages/username-and-password-with-trpc/pages/signup.tsx @@ -0,0 +1,78 @@ +import { useRouter } from "next/router"; +import { auth } from "@/auth/lucia"; +import { useState } from "react"; + +import Link from "next/link"; + +import type { GetServerSidePropsContext, GetServerSidePropsResult } from "next"; + +export const getServerSideProps = async ( + context: GetServerSidePropsContext +): Promise{errorMessage}
} + Sign in + > + ); +}; + +export default Page; diff --git a/nextjs-pages/username-and-password-with-trpc/public/favicon.ico b/nextjs-pages/username-and-password-with-trpc/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c GIT binary patch literal 25931 zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83 zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO{pgX9699l+Qppw7jXaYf~-84xW z)w4x8?=youko|}Vr~(D$UXdAMQaiH zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V zG#-?gKlr}Eeqifb{|So?HM&g91P8|av8hQoCmQXkd?7wIJw b z_^v8bbg` SAn{I*4bH$u(RZ6*x UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq36!pV6Az&m{O8$wGFD? zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH( zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x z);_{lY<;);XzT`dBFpRmGrr}z5u1=p C^ S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a( z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F= zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk( $?Qw({erA$^bC;q33hv!d!>%wRhj# zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU ^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?- zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ zy|Qn`hxx(58c 70$E;L(X0uZZ72M1!6oeg)(cdKO ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC> z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl z8H5(Q?l#wzazujH!8o>1xtn8#_w+397* _cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+ z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{ z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^ zb&uBN!Ja3UzYHK-CTyA5=L zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$ z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G; zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8 zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU &68iRikRrHRW|ZxzRR^`eIGt zIeiDgVS>IeExKVRWW8-= A= yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_ zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v #ix45EVrcEhr>!NMhprl $InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~ &^=4?PL&nd8)`OfG#n zwAMN$1&>K++c{^|7< 4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C zI@}sc Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7 zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S zb+ 9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2 `1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc- zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I zgg{b=Iz}WkhCGj1M =hu4#Aw173YxIVbISaoc z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S( O(a0e7oY=E( zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef LrJugUA?W`A8`#=m literal 0 HcmV?d00001 diff --git a/nextjs-pages/username-and-password-with-trpc/public/next.svg b/nextjs-pages/username-and-password-with-trpc/public/next.svg new file mode 100644 index 0000000..5174b28 --- /dev/null +++ b/nextjs-pages/username-and-password-with-trpc/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/nextjs-pages/username-and-password-with-trpc/public/vercel.svg b/nextjs-pages/username-and-password-with-trpc/public/vercel.svg new file mode 100644 index 0000000..d2f8422 --- /dev/null +++ b/nextjs-pages/username-and-password-with-trpc/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/nextjs-pages/username-and-password-with-trpc/schema.sql b/nextjs-pages/username-and-password-with-trpc/schema.sql new file mode 100644 index 0000000..c62ad0c --- /dev/null +++ b/nextjs-pages/username-and-password-with-trpc/schema.sql @@ -0,0 +1,17 @@ +CREATE TABLE user ( + id VARCHAR(15) PRIMARY KEY, + username VARCHAR(31) NOT NULL UNIQUE +); +CREATE TABLE user_key ( + id VARCHAR(255) PRIMARY KEY, + user_id VARCHAR(15) NOT NULL, + hashed_password VARCHAR(255), + FOREIGN KEY (user_id) REFERENCES user(id) +); +CREATE TABLE user_session ( + id VARCHAR(127) PRIMARY KEY, + user_id VARCHAR(15) NOT NULL, + active_expires BIGINT NOT NULL, + idle_expires BIGINT NOT NULL, + FOREIGN KEY (user_id) REFERENCES user(id) +); \ No newline at end of file diff --git a/nextjs-pages/username-and-password-with-trpc/styles/globals.css b/nextjs-pages/username-and-password-with-trpc/styles/globals.css new file mode 100644 index 0000000..1b3aad5 --- /dev/null +++ b/nextjs-pages/username-and-password-with-trpc/styles/globals.css @@ -0,0 +1,10 @@ +body { + padding: 2rem; +} +* { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.error { + color: red; +} diff --git a/nextjs-pages/username-and-password-with-trpc/tsconfig.json b/nextjs-pages/username-and-password-with-trpc/tsconfig.json new file mode 100644 index 0000000..670224f --- /dev/null +++ b/nextjs-pages/username-and-password-with-trpc/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +} From fe51d44e63e40d00e0921e71c40da89ff8a3b797 Mon Sep 17 00:00:00 2001 From: BimaAdi Date: Sun, 15 Oct 2023 11:42:30 +0700 Subject: [PATCH 2/4] add trpc --- .../package-lock.json | 121 +++++++++++++++++- .../package.json | 8 +- .../pages/_app.tsx | 9 +- .../pages/api/trpc/[trpc].ts | 23 ++++ .../pages/index.tsx | 7 +- .../server/context.ts | 19 +++ .../server/trpc.ts | 38 ++++++ .../utils/trpc.ts | 32 +++++ 8 files changed, 249 insertions(+), 8 deletions(-) create mode 100644 nextjs-pages/username-and-password-with-trpc/pages/api/trpc/[trpc].ts create mode 100644 nextjs-pages/username-and-password-with-trpc/server/context.ts create mode 100644 nextjs-pages/username-and-password-with-trpc/server/trpc.ts create mode 100644 nextjs-pages/username-and-password-with-trpc/utils/trpc.ts diff --git a/nextjs-pages/username-and-password-with-trpc/package-lock.json b/nextjs-pages/username-and-password-with-trpc/package-lock.json index 80f70bb..e7dac82 100644 --- a/nextjs-pages/username-and-password-with-trpc/package-lock.json +++ b/nextjs-pages/username-and-password-with-trpc/package-lock.json @@ -9,11 +9,17 @@ "version": "0.1.0", "dependencies": { "@lucia-auth/adapter-sqlite": "^2.0.0", + "@tanstack/react-query": "^4.36.1", + "@trpc/client": "^10.40.0", + "@trpc/next": "^10.40.0", + "@trpc/react-query": "^10.40.0", + "@trpc/server": "^10.40.0", "better-sqlite3": "^8.7.0", "lucia": "^2.7.1", "next": "13.5.4", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "zod": "^3.22.4" }, "devDependencies": { "@types/better-sqlite3": "^7.6.5", @@ -351,6 +357,95 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/query-core": { + "version": "4.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.36.1.tgz", + "integrity": "sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "4.36.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.36.1.tgz", + "integrity": "sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==", + "dependencies": { + "@tanstack/query-core": "4.36.1", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-native": "*" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/@trpc/client": { + "version": "10.40.0", + "resolved": "https://registry.npmjs.org/@trpc/client/-/client-10.40.0.tgz", + "integrity": "sha512-bT6BcdWjj0KzGQiimE6rB2tIaRYX0Ear4Gthb5szN/c01wrP0yC1Fbz2uCcm/QTVAwu4Lve5M+YjPoEaTHG6lg==", + "funding": [ + "https://trpc.io/sponsor" + ], + "peerDependencies": { + "@trpc/server": "10.40.0" + } + }, + "node_modules/@trpc/next": { + "version": "10.40.0", + "resolved": "https://registry.npmjs.org/@trpc/next/-/next-10.40.0.tgz", + "integrity": "sha512-GMOiN+2DIfUXxS2DuTuTT3FOzkuB5p6+1QglY5M9ywKFWBVTGkBnbLkTgoPGuglq+dPfcZbcSajRN22AUv5Qtg==", + "funding": [ + "https://trpc.io/sponsor" + ], + "dependencies": { + "react-ssr-prepass": "^1.5.0" + }, + "peerDependencies": { + "@tanstack/react-query": "^4.18.0", + "@trpc/client": "10.40.0", + "@trpc/react-query": "10.40.0", + "@trpc/server": "10.40.0", + "next": "*", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@trpc/react-query": { + "version": "10.40.0", + "resolved": "https://registry.npmjs.org/@trpc/react-query/-/react-query-10.40.0.tgz", + "integrity": "sha512-DpJrV3lmYNo9xtPtcg49lfh9CUFap3ZivjhlSmfe4QPf7H6xBjAE+ml4OdJ0RmKvSTFvbLSOiNdB1k5O8zIdzQ==", + "funding": [ + "https://trpc.io/sponsor" + ], + "peerDependencies": { + "@tanstack/react-query": "^4.18.0", + "@trpc/client": "10.40.0", + "@trpc/server": "10.40.0", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@trpc/server": { + "version": "10.40.0", + "resolved": "https://registry.npmjs.org/@trpc/server/-/server-10.40.0.tgz", + "integrity": "sha512-49SUOMWzSZtu5+OdrADmJD+u+sjSE0qj1cWgYk2FY4jLkPJunLuNRuhzM7aOeBhiUjyfhg2YTfur8FN1WBmvEw==", + "funding": [ + "https://trpc.io/sponsor" + ] + }, "node_modules/@types/better-sqlite3": { "version": "7.6.5", "resolved": "https://registry.npmjs.org/@types/better-sqlite3/-/better-sqlite3-7.6.5.tgz", @@ -3221,6 +3316,14 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "dev": true }, + "node_modules/react-ssr-prepass": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz", + "integrity": "sha512-yFNHrlVEReVYKsLI5lF05tZoHveA5pGzjFbFJY/3pOqqjGOmMmqx83N4hIjN2n6E1AOa+eQEUxs3CgRnPmT0RQ==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -3927,6 +4030,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", @@ -4056,6 +4167,14 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zod": { + "version": "3.22.4", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz", + "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } } } } diff --git a/nextjs-pages/username-and-password-with-trpc/package.json b/nextjs-pages/username-and-password-with-trpc/package.json index 73f9086..afd4a9b 100644 --- a/nextjs-pages/username-and-password-with-trpc/package.json +++ b/nextjs-pages/username-and-password-with-trpc/package.json @@ -10,11 +10,17 @@ }, "dependencies": { "@lucia-auth/adapter-sqlite": "^2.0.0", + "@tanstack/react-query": "^4.36.1", + "@trpc/client": "^10.40.0", + "@trpc/next": "^10.40.0", + "@trpc/react-query": "^10.40.0", + "@trpc/server": "^10.40.0", "better-sqlite3": "^8.7.0", "lucia": "^2.7.1", "next": "13.5.4", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "zod": "^3.22.4" }, "devDependencies": { "@types/better-sqlite3": "^7.6.5", diff --git a/nextjs-pages/username-and-password-with-trpc/pages/_app.tsx b/nextjs-pages/username-and-password-with-trpc/pages/_app.tsx index 6025b37..489d278 100644 --- a/nextjs-pages/username-and-password-with-trpc/pages/_app.tsx +++ b/nextjs-pages/username-and-password-with-trpc/pages/_app.tsx @@ -1,10 +1,9 @@ import "@/styles/globals.css"; - import Head from "next/head"; +import type { AppProps, AppType } from "next/app"; +import { trpc } from '../utils/trpc'; -import type { AppProps } from "next/app"; - -export default function App({ Component, pageProps }: AppProps) { +const MyApp: AppType = ({ Component, pageProps }: AppProps) => { return ( <> @@ -14,3 +13,5 @@ export default function App({ Component, pageProps }: AppProps) { > ); } + +export default trpc.withTRPC(MyApp); diff --git a/nextjs-pages/username-and-password-with-trpc/pages/api/trpc/[trpc].ts b/nextjs-pages/username-and-password-with-trpc/pages/api/trpc/[trpc].ts new file mode 100644 index 0000000..0e5d4ce --- /dev/null +++ b/nextjs-pages/username-and-password-with-trpc/pages/api/trpc/[trpc].ts @@ -0,0 +1,23 @@ +/** + * This is the API-handler of your app that contains all your API routes. + * On a bigger app, you will probably want to split this file up into multiple files. + */ +import * as trpcNext from '@trpc/server/adapters/next'; +import { protectedProcedure, router } from '@/server/trpc'; +import { createContext } from '@/server/context'; + +const appRouter = router({ + me: protectedProcedure.query(({ctx}) => { + return ctx.session + }) +}); + +// export only the type definition of the API +// None of the actual implementation is exposed to the client +export type AppRouter = typeof appRouter; + +// export API handler +export default trpcNext.createNextApiHandler({ + router: appRouter, + createContext +}); diff --git a/nextjs-pages/username-and-password-with-trpc/pages/index.tsx b/nextjs-pages/username-and-password-with-trpc/pages/index.tsx index c835115..30a69d9 100644 --- a/nextjs-pages/username-and-password-with-trpc/pages/index.tsx +++ b/nextjs-pages/username-and-password-with-trpc/pages/index.tsx @@ -6,6 +6,7 @@ import type { GetServerSidePropsResult, InferGetServerSidePropsType } from "next"; +import { trpc } from "@/utils/trpc"; export const getServerSideProps = async ( context: GetServerSidePropsContext @@ -37,11 +38,13 @@ const Page = ( props: InferGetServerSidePropsType ) => { const router = useRouter(); + const me = trpc.me.useQuery(); + return ( <> Profile
-User id: {props.userId}
-Username: {props.username}
+User id: {me.data?.user?.userId}
+Username: {me.data?.user?.username}