0:00

48:29

Better Auth With TanStack Router & NestJS

Michael Guay·48:29·Technology·C1

Chương · 5

Chương 1·Monorepo Setup and Backend Foundation

Hiển thị

Tiếng ViệtAuto-scroll

0:01

Hey everyone.

Chào mọi người.

0:01

Today I'm super snorts excited to bring you a brand new video on integrating better off in a tanstack router application with a Nest.js backend.

Hôm nay tôi cực kỳ [khịt mũi] hào hứng mang đến cho các bạn một video mới về tích hợp Better Auth vào ứng dụng TanStack Router với backend Nest.js.

0:11

Now, in my opinion, this is probably one of the best setups you can have today when developing a full stack web app with the scalable and highly maintainable Nest.js backend with your own custom better off setup which

Theo tôi, đây có lẽ là một trong những thiết lập tốt nhất hiện nay khi phát triển ứng dụng web full-stack với backend Nest.js có khả năng mở rộng và bảo trì cao, kết hợp với thiết lập Better Auth tùy chỉnh của riêng bạn, điều này

0:26

makes setting up secure JWTbased authentication so easy, so quick and so secure.

giúp việc thiết lập xác thực dựa trên JWT an toàn trở nên dễ dàng, nhanh chóng và bảo mật.

0:30

And finally, we can plug it into a React UI so quickly with Tanstack Router on top, which is quickly becoming my favorite way to create React apps thanks to the beautiful Typesafe Tanstack router.

Và cuối cùng, chúng ta có thể kết nối nó với giao diện React một cách nhanh chóng nhờ TanStack Router, đây đang dần trở thành cách yêu thích của tôi để tạo ứng dụng React nhờ vào TanStack Router an toàn về kiểu dữ liệu tuyệt đẹp.

0:43

Now, we're going to see how we can integrate all of this in today's video.

Bây giờ, chúng ta sẽ xem cách tích hợp tất cả những điều này trong video hôm nay.

0:49

I'm so excited to check

Tôi rất hào hứng để xem

0:51

this out.

điều này.

0:51

Now, before we jump in, I just want to let you know if you enjoy content similar to this, head over to my membership website at michaelguay.dev, where you'll get access to hundreds of hours of exclusive developer content in the form of additional lectures, as well as get access to all of my best-selling full courses here, including my latest one here on clean architecture and

Trước khi bắt đầu, tôi chỉ muốn cho bạn biết nếu bạn thích nội dung tương tự, hãy truy cập trang web thành viên của tôi tại michaelguay.dev, nơi bạn sẽ có quyền truy cập vào hàng trăm giờ nội dung dành cho nhà phát triển độc quyền dưới dạng các bài giảng bổ sung, cũng như truy cập tất cả các khóa học đầy đủ bán chạy nhất của tôi, bao gồm khóa học mới nhất về kiến trúc sạch và

1:16

domain driven design in Nest.js with over eight hours of exclusive content here going over how to build clean applications that are highly scalable using CQRS and domain driven design.

thiết kế hướng miền trong Nest.js với hơn tám giờ nội dung độc quyền hướng dẫn cách xây dựng các ứng dụng sạch, có khả năng mở rộng cao bằng CQRS và thiết kế hướng miền.

1:25

I know if you enjoy this kind of content then you'll get so much value out of my site.

Tôi biết nếu bạn thích loại nội dung này thì bạn sẽ nhận được rất nhiều giá trị từ trang web của tôi.

1:32

So I'll leave a link below and thank you so much for checking it out.

Vì vậy, tôi sẽ để lại liên kết bên dưới và cảm ơn bạn rất nhiều vì đã xem qua.

1:37

Let's jump right into the video.

Hãy bắt đầu vào video ngay.

1:38

All right, so we're going to go ahead and get started with creating our Turbo repo, which is the monorreo manager we're going to use in this lecture.

Được rồi, chúng ta sẽ bắt đầu bằng cách tạo Turbo repo, đây là trình quản lý monorepo mà chúng ta sẽ sử dụng trong bài học này.

1:47

I have a previous video on a deep dive into turbo repo in case you want to learn more about it, the benefits of it that I will link below.

Tôi có một video trước đây về phân tích sâu về turbo repo trong trường hợp bạn muốn tìm hiểu thêm về nó, những lợi ích của nó, tôi sẽ để lại liên kết bên dưới.

1:55

But really what it provides us is a nice streamlined way

Nhưng thực sự những gì nó cung cấp cho chúng ta là một cách hợp lý hóa tuyệt vời

1:59

to have a single repository and workspace with multiple applications.

để có một kho lưu trữ duy nhất và không gian làm việc với nhiều ứng dụng.

2:02

in this case are tanstack react router UI and NestJS backend but you can feel free to use whatever monorreo or structure you want.

trong trường hợp này là giao diện người dùng TanStack React Router và backend NestJS, nhưng bạn có thể thoải mái sử dụng bất kỳ monorepo hoặc cấu trúc nào bạn muốn.

2:11

I'll go ahead and also use bun in this lecture which is starting to become my favorite dependency manager and script runner of choice as it is the fastest in my opinion the best one but you can also

Tôi cũng sẽ sử dụng bun trong bài học này, đây đang dần trở thành trình quản lý phụ thuộc và trình chạy script yêu thích của tôi vì nó nhanh nhất, theo tôi là tốt nhất, nhưng bạn cũng có thể

2:26

feel free to use whichever one you prefer.

thoải mái sử dụng bất kỳ cái nào bạn thích.

2:29

If you don't have bun installed on your machine yet, I'll leave a link below where you can grab that with a oneline command.

Nếu bạn chưa cài đặt bun trên máy, tôi sẽ để lại liên kết bên dưới để bạn có thể tải nó bằng một lệnh duy nhất.

2:38

Once we have that up and running, we can use bunx create turbo at latest and let's go ahead and set up a new turbo repo.

Sau khi đã cài đặt và chạy, chúng ta có thể sử dụng bunx create turbo@latest và hãy thiết lập một turbo repo mới.

2:48

I'll go ahead and call it tenstack better off NestJS.

Tôi sẽ đặt tên nó là tanstack-better-auth-nestjs.

2:52

Call it whatever you like.

Bạn có thể đặt tên tùy thích.

2:53

And we'll go ahead and select bun as our package manager.

Và chúng ta sẽ chọn bun làm trình quản lý gói.

2:57

So, this will go ahead and set up the turbo repo with all of our dependencies where then we can cd into the newly generated turbo repo and open it up inside of our code editor.

Vì vậy, điều này sẽ thiết lập turbo repo với tất cả các phụ thuộc, sau đó chúng ta có thể cd vào turbo repo mới được tạo và mở nó trong trình soạn thảo mã của chúng ta.

3:09

In this case, VS Code.

Trong trường hợp này là VS Code.

3:10

So, now you can see our project all set up.

Bây giờ bạn có thể thấy dự án của chúng ta đã được thiết lập.

3:13

Here we have our apps directory where the applications

Ở đây chúng ta có thư mục apps nơi các ứng dụng

3:17

themselves live and a packages directory with any shared code.

tồn tại và thư mục packages với bất kỳ mã dùng chung nào.

3:20

We can go ahead and remove the packages directory since we're not going to use this and we can restructure the apps directory.

Chúng ta có thể xóa thư mục packages vì chúng ta sẽ không sử dụng nó và có thể cấu trúc lại thư mục apps.

3:28

So by default turbo repo will create a couple of next.js apps.

Theo mặc định, turbo repo sẽ tạo một vài ứng dụng Next.js.

3:32

Let's go ahead and remove both of these so we can start on a clean slate.

Hãy xóa cả hai để bắt đầu với một bảng sạch.

3:38

So now we have an empty turbo repo with bun all

Bây giờ chúng ta có một turbo repo trống với bun đã được

3:42

set up and ready to go.

thiết lập và sẵn sàng.

3:44

Let's go ahead and start setting up our NestJS backend where we can integrate and set up better off before finally wiring it into the tan stack router UI.

Hãy bắt đầu thiết lập backend NestJS của chúng ta, nơi chúng ta sẽ tích hợp và thiết lập Better Auth trước khi kết nối nó vào giao diện người dùng TanStack Router.

3:55

All right, so our first step is to set up our NestJS backend.

Được rồi, bước đầu tiên của chúng ta là thiết lập backend NestJS.

4:00

So I'm going to CD into apps directory and then use bunx which is the npx equivalent in bun nestjs/ cli new I'll call it api and choose package

Vì vậy, tôi sẽ cd vào thư mục apps và sau đó sử dụng bunx, tương đương với npx trong bun, nestjs/cli new, tôi sẽ đặt tên là api và chọn trình quản lý gói

4:12

manager as bun.

là bun.

4:13

Now you might see here that package manager bun is not managed.

Bây giờ bạn có thể thấy ở đây trình quản lý gói bun không được quản lý.

4:18

That is fine.

Điều đó không sao.

4:19

We should now see back in the project we have our API directory with a brand new NestJS application.

Bây giờ chúng ta sẽ thấy trong dự án, chúng ta có thư mục api với một ứng dụng NestJS hoàn toàn mới.

4:28

Now, just as a cleanup, make sure we cd into API and go ahead and remove any git directory that has been created here.

Để dọn dẹp, hãy đảm bảo cd vào api và xóa bất kỳ thư mục git nào đã được tạo ở đây.

4:37

And same thing for node modules since this is created globally.

Và tương tự với node_modules vì nó được tạo toàn cục.

4:41

And now if we go back to the root and run bunt install again, this should pick up our new Nest.js GS dependencies because this is a bun workspace thanks to turbo repo.

Và bây giờ nếu chúng ta quay lại thư mục gốc và chạy bun install lại, nó sẽ nhận các phụ thuộc NestJS mới vì đây là không gian làm việc bun nhờ turbo repo.

4:54

Here we defined our workspaces array and that tells bun to look for package jsons in any of these directories when installing dependencies.

Ở đây chúng ta đã định nghĩa mảng workspaces và điều đó bảo bun tìm kiếm package.json trong bất kỳ thư mục nào trong số này khi cài đặt phụ thuộc.

5:04

So now the API should be set up.

Vậy là api đã được thiết lập.

5:07

Our package json has all of our familiar starting Nest.js scripts to start the development server and start up the compiled JavaScript.

Package.json của chúng ta có tất cả các script NestJS quen thuộc để khởi động máy chủ phát triển và khởi động JavaScript đã biên dịch.

5:15

We can see inside of source we have our familiar maints file where we bootstrap the application server on port 3000 to listen for incoming traffic.

Chúng ta có thể thấy bên trong source có file main.ts quen thuộc, nơi chúng ta khởi động máy chủ ứng dụng trên cổng 3000 để lắng nghe lưu lượng truy cập đến.

5:25

We also have the default app controller which defines our

Chúng ta cũng có app controller mặc định định nghĩa

5:29

HTTP routes.

Các tuyến HTTP.

5:29

So we have our single get route here exposed at the root of the web server and we're also injecting this app service using constructor injection because it's marked as an injectable.

Vì vậy, chúng ta có một tuyến GET duy nhất được hiển thị tại gốc của máy chủ web và chúng ta cũng đang tiêm dịch vụ app này bằng cách sử dụng tiêm hàm tạo vì nó được đánh dấu là có thể tiêm.

5:43

And in here we just have a get hello method that returns the stub string.

Và ở đây chúng ta chỉ có một phương thức get hello trả về chuỗi stub.

5:47

So with all of this in place, we should be able to start up the Nest.js development server by running turbo dev at the root.

Với tất cả những điều này, chúng ta sẽ có thể khởi động máy chủ phát triển Nest.js bằng cách chạy turbo dev tại thư mục gốc.

5:56

We'll first make sure that we actually update our package JSON in Nest.js.

Trước tiên, chúng ta sẽ đảm bảo rằng chúng ta thực sự cập nhật package JSON trong Nest.js.

6:00

It comes out of the box with startdev, but we want to standardize this to be just dev, which will match the same command as our React UI later on.

Nó đi kèm với startdev, nhưng chúng ta muốn chuẩn hóa nó thành chỉ dev, điều này sẽ khớp với cùng một lệnh như giao diện React của chúng ta sau này.

6:09

To make sure we save this.

Để chắc chắn chúng ta lưu lại.

6:11

So now the commands are aligned and now if we run turbed dev from the root of the application you can see our NestJS server has compiled and

Vì vậy, bây giờ các lệnh đã được đồng bộ và nếu chúng ta chạy turbo dev từ thư mục gốc của ứng dụng, bạn có thể thấy máy chủ NestJS của chúng ta đã biên dịch và

6:20

is now listening for changes which is great and so now the web server is listening for traffic.

đang lắng nghe các thay đổi, điều này thật tuyệt, và bây giờ máy chủ web đang lắng nghe lưu lượng truy cập.

6:26

If we go to localhost 3000 inside of our browser or launch a request in any client like Postman you can see here we have the hello world stub string being returned back to us.

Nếu chúng ta truy cập localhost 3000 trong trình duyệt hoặc gửi một yêu cầu trong bất kỳ ứng dụng khách nào như Postman, bạn có thể thấy ở đây chúng ta nhận được chuỗi stub hello world được trả về.

6:37

So this is awesome.

Điều này thật tuyệt vời.

6:39

And we have the NestJS API up and running.

Và chúng ta đã có API NestJS hoạt động.

6:42

Let's now go ahead and set up our better off integration so that we can have authentication on this server.

Bây giờ hãy thiết lập tích hợp better-auth để chúng ta có thể có xác thực trên máy chủ này.

6:50

So the first thing that we'll have to do is go ahead and install the dependencies that we need.

Điều đầu tiên chúng ta cần làm là cài đặt các phụ thuộc cần thiết.

6:58

So make sure we are in the API directory and let's run bun install.

Hãy đảm bảo chúng ta đang ở trong thư mục API và chạy bun install.

7:04

We will add at phallispjs better off which is the nest.js implementation wrapper around better off.

Chúng ta sẽ thêm @phallispjs/better-auth, đây là trình bao bọc Nest.js cho better-auth.

7:11

We'll add better off itself.

Chúng ta sẽ thêm chính better-auth.

7:14

Drizzle RM for database persistence Postgress to connect to our Postgress DB.

Drizzle ORM để lưu trữ cơ sở dữ liệu, Postgres để kết nối với cơ sở dữ liệu Postgres của chúng ta.

7:18

Make sure we then go ahead and install -d for development cli which will help us to load in environment variables and drizzle kit which is going to allow us to create and execute migrations.

Sau đó, hãy cài đặt -d cho cli phát triển, điều này sẽ giúp chúng ta tải các biến môi trường và drizzle kit, cho phép chúng ta tạo và thực thi các migration.

7:32

So now we have all the dependencies that we should need to go ahead and get started.

Vậy bây giờ chúng ta có tất cả các phụ thuộc cần thiết để bắt đầu.

7:38

I'll go ahead

Tôi sẽ

7:40

and restart my development server and go ahead and start adding the implementation.

khởi động lại máy chủ phát triển và bắt đầu thêm phần triển khai.

7:45

All right, so now that we have the dependencies we need, let's go ahead and start off by cleaning up our application.

Được rồi, bây giờ chúng ta đã có các phụ thuộc cần thiết, hãy bắt đầu bằng cách dọn dẹp ứng dụng của chúng ta.

7:53

Remove our app service and app controller spec file.

Xóa tệp app service và app controller spec.

7:56

These are no longer going to be used.

Chúng sẽ không còn được sử dụng nữa.

7:59

Let's keep our app controller file completely clean and empty.

Hãy giữ tệp app controller hoàn toàn sạch sẽ và trống rỗng.

8:03

And now we're ready to start.

Và bây giờ chúng ta đã sẵn sàng để bắt đầu.

8:06

We can remove the app service from the app module as well.

Chúng ta cũng có thể xóa app service khỏi app module.

8:10

Now the first thing that we want to do is set up our database connection which is where we're going to persist our users details.

Điều đầu tiên chúng ta muốn làm là thiết lập kết nối cơ sở dữ liệu, nơi chúng ta sẽ lưu trữ thông tin chi tiết của người dùng.

8:19

So for this let's create a new DB directory.

Vì vậy, hãy tạo một thư mục DB mới.

8:23

And inside of DB we can add a index.ts file where we'll set up our database connection and our schema exports.

Và bên trong DB, chúng ta có thể thêm tệp index.ts, nơi chúng ta sẽ thiết lập kết nối cơ sở dữ liệu và xuất schema.

8:31

So inside of this index.ts

Vì vậy, bên trong tệp index.ts này,

8:33

file.

8:33

Let's go ahead and firstly get access to the database URL.

Hãy trước tiên lấy URL cơ sở dữ liệu.

8:37

Now in this example project, I'm actually not going to be using the NestJS injection system and the config module to pull off environment variables.

Trong dự án ví dụ này, tôi thực sự sẽ không sử dụng hệ thống tiêm NestJS và mô-đun cấu hình để lấy các biến môi trường.

8:47

And that's because well better off native tooling, the CLI that we're then going to be using to actually generate our Drizzle RM Postgress migrations to create all of

Và đó là bởi vì các công cụ gốc của better-auth, CLI mà chúng ta sẽ sử dụng để tạo các migration Drizzle ORM Postgres nhằm tạo tất cả

8:58

our tables.

các bảng của chúng ta.

8:58

It needs to read in our raw better off file for this.

Nó cần đọc tệp better-auth thô cho việc này.

9:03

And this is not really very compatible with the NestJS injection system at the moment.

Và điều này không thực sự tương thích với hệ thống tiêm NestJS ở thời điểm hiện tại.

9:09

And I'm going to show you how to do this in a very clean way because we're still going to have our environment variable validation and be able to read those in.

Và tôi sẽ chỉ cho bạn cách thực hiện điều này một cách rất sạch sẽ vì chúng ta vẫn sẽ có xác thực biến môi trường và có thể đọc chúng.

9:16

So for this, let's go ahead and set the URL to process database URL.

Vì vậy, hãy đặt URL thành process.env.DATABASE_URL.

9:21

So we'll pull that off of the MV and do some validation here.

Chúng ta sẽ lấy nó từ biến môi trường và thực hiện một số xác thực ở đây.

9:26

So if there is no URL defined, make sure we throw an error and have our own validation where we say database URL is not set.

Vì vậy, nếu không có URL nào được định nghĩa, hãy đảm bảo chúng ta ném ra một lỗi và có xác thực riêng, nơi chúng ta nói rằng DATABASE_URL chưa được đặt.

9:36

So now we know the database URL has to be set in the environment.

Vậy bây giờ chúng ta biết rằng URL cơ sở dữ liệu phải được đặt trong môi trường.

9:41

Let's create our Postgress and Drizzle objects

Hãy tạo các đối tượng Postgres và Drizzle

9:44

to connect to the database.

để kết nối với cơ sở dữ liệu.

9:45

And so now we'll go ahead and export const client which is going to be the database client.

Và bây giờ chúng ta sẽ xuất const client, đây sẽ là ứng dụng khách cơ sở dữ liệu.

9:51

And so this will be equal to a call to Postgress from Postgress which will establish a connection to a Postgress QL server.

Và điều này sẽ bằng một lời gọi tới postgres từ 'postgres', điều này sẽ thiết lập một kết nối tới một máy chủ PostgreSQL.

9:58

And so here we'll provide the database URL that we'll set up in our M shortly.

Và ở đây chúng ta sẽ cung cấp URL cơ sở dữ liệu mà chúng ta sẽ thiết lập trong biến môi trường của chúng ta.

10:04

Next up, let's go ahead and export const DB which is going

Tiếp theo, hãy xuất const db, đây sẽ là

10:08

to be equal to Drizzle.

bằng với Drizzle.

10:10

And importantly make sure we import this from drizzler/postgress-js to make sure we're on a compatible version.

Và quan trọng là hãy đảm bảo chúng ta import cái này từ drizzler/postgress-js để chắc chắn rằng chúng ta đang dùng phiên bản tương thích.

10:16

And so this function constructor function takes in the client object which is the raw database connection and then a configuration object where we can specify our database schema to make sure our code is type safe and we're going to generate this

Và hàm tạo này nhận vào đối tượng client, đó là kết nối cơ sở dữ liệu thô, và một đối tượng cấu hình nơi chúng ta có thể chỉ định schema cơ sở dữ liệu để đảm bảo mã của chúng ta an toàn về kiểu và chúng ta sẽ tạo ra cái này

10:34

automatically with better off CLI in a later section.

tự động với CLI better off trong phần sau.

10:40

For now, we'll set it to an empty object.

Hiện tại, chúng ta sẽ đặt nó thành một đối tượng rỗng.

10:43

And then we can set casing to snake case to have consistency within better off.

Và sau đó chúng ta có thể đặt casing thành snake case để có sự nhất quán trong better off.

10:48

And finally, we now have the database connection objects that we need.

Và cuối cùng, bây giờ chúng ta có các đối tượng kết nối cơ sở dữ liệu cần thiết.

10:52

We have the raw database client and then the drizzle instance, which is how our application will actually interact with the database using this type safe OM since it'll be aware of our

Chúng ta có client cơ sở dữ liệu thô và instance drizzle, đó là cách ứng dụng của chúng ta sẽ thực sự tương tác với cơ sở dữ liệu bằng cách sử dụng OM an toàn kiểu này vì nó sẽ biết về

11:04

schema.

schema của chúng ta.

11:04

So with this in place, let's go ahead and now create a new OTS file where we'll go ahead and set up the better O object.

Với điều này, chúng ta hãy tạo một tệp OTS mới nơi chúng ta sẽ thiết lập đối tượng better O.

11:14

So inside of this file, let's now go ahead and export the O object, which is going to be using the better off constructor function from Better O.

Vì vậy, bên trong tệp này, hãy xuất đối tượng O, sẽ sử dụng hàm tạo better off từ Better O.

11:25

And this is where we actually configure Better O and all of the options that it makes available to us.

Và đây là nơi chúng ta thực sự cấu hình Better O và tất cả các tùy chọn mà nó cung cấp cho chúng ta.

11:33

The most important one here is going to be the database property which actually points better off at the correct database adapter so that it can read and write users.

Cái quan trọng nhất ở đây là thuộc tính database, thực sự trỏ better off đến adapter cơ sở dữ liệu chính xác để nó có thể đọc và ghi người dùng.

11:43

So we want to set this to the drizzle adapter from adapters/drizzle which is going to be a function that takes in the underlying database connection and that's going to be the DB object that we set up earlier using

Vì vậy, chúng ta muốn đặt nó thành adapter drizzle từ adapters/drizzle, đó là một hàm nhận vào kết nối cơ sở dữ liệu bên dưới và đó sẽ là đối tượng DB mà chúng ta đã thiết lập trước đó bằng cách sử dụng

11:58

Drizzle.

11:58

So that will provide the OM driver to better off so it can actually make calls to the database.

Vì vậy, điều đó sẽ cung cấp trình điều khiển OM cho better off để nó thực sự có thể thực hiện các cuộc gọi đến cơ sở dữ liệu.

12:06

And we also have to specify the PG provider to make sure it's using the Postgress dialect.

Và chúng ta cũng phải chỉ định nhà cung cấp PG để đảm bảo nó sử dụng phương ngữ Postgress.

12:13

Next up, we also want to configure email and password which is going to be our authentication option of choice for this lecture with an email and password.

Tiếp theo, chúng ta cũng muốn cấu hình email và mật khẩu, đó sẽ là tùy chọn xác thực được chọn cho bài giảng này với email và mật khẩu.

12:22

So to enable it, we have to set the enabled property to true.

Vì vậy, để kích hoạt nó, chúng ta phải đặt thuộc tính enabled thành true.

12:26

And we can also set auto signin to true to make sure that we sign the user in after they create an account.

Và chúng ta cũng có thể đặt auto signin thành true để đảm bảo rằng chúng ta đăng nhập người dùng sau khi họ tạo tài khoản.

12:34

So this will configure email and password authentication.

Vì vậy, điều này sẽ cấu hình xác thực email và mật khẩu.

12:37

We now want

Bây giờ chúng ta muốn

12:38

to also specify the trusted origins which are the actual URLs that can make requests to better off.

cũng chỉ định trusted origins, đó là các URL thực tế có thể gửi yêu cầu đến better off.

12:44

So this is a security feature to only restrict this to known origins.

Đây là một tính năng bảo mật để chỉ giới hạn điều này cho các nguồn gốc đã biết.

12:49

In our case, we want to create a new web URL const that will read the web URL environment variable.

Trong trường hợp của chúng ta, chúng ta muốn tạo một const web URL mới sẽ đọc biến môi trường web URL.

12:57

Otherwise, we'll default to our localhost option, which will be pointing at our vite server where we'll run our react tanstack router app at localhost or we can pull it off of the environment in production.

Nếu không, chúng ta sẽ mặc định đến tùy chọn localhost của chúng ta, sẽ trỏ đến máy chủ vite nơi chúng ta sẽ chạy ứng dụng react tanstack router tại localhost hoặc chúng ta có thể lấy nó từ môi trường trong sản xuất.

13:12

So, let's use that web URL inside of trusted origins.

Vì vậy, hãy sử dụng web URL đó bên trong trusted origins.

13:16

Next up, we need to set the secret property, which is going to be the secret property that is used to sign and verify our JWT

Tiếp theo, chúng ta cần đặt thuộc tính secret, đó sẽ là thuộc tính bí mật được sử dụng để ký và xác minh JWT của chúng ta

13:27

or secure tokens, which allows a user to authenticate.

hoặc token bảo mật, cho phép người dùng xác thực.

13:32

So, this is the process.

Vì vậy, đây là quy trình.

13:35

Oau secret.

13:36

And then we also want the base URL.

Và sau đó chúng ta cũng muốn base URL.

13:40

For this, we'll use process m.

Đối với điều này, chúng ta sẽ sử dụng process m.

13:42

header off URL or this will be the localhost 3000 the default backend address which corresponds to our main TS port and so this is used for some redirects in better off when we use SSO or social authentication finally let's configure the advanced object where we can set default cookie attributes because by default we're going to be using secure

header off URL hoặc đây sẽ là localhost 3000, địa chỉ backend mặc định tương ứng với cổng main TS của chúng ta và điều này được sử dụng cho một số chuyển hướng trong better off khi chúng ta sử dụng SSO hoặc xác thực xã hội. Cuối cùng, hãy cấu hình đối tượng advanced nơi chúng ta có thể đặt các thuộc tính cookie mặc định bởi vì theo mặc định chúng ta sẽ sử dụng secure

14:08

JWT cookies HTTPon cookies to authenticate on our web URL which is where the JDT will be stored.

JWT cookies HTTPon cookies để xác thực trên web URL của chúng ta, nơi JDT sẽ được lưu trữ.

14:15

However, we want to configure same site property to be lax to allow for cookies to be set on different domains in case we're running in production on a different URL.

Tuy nhiên, chúng ta muốn cấu hình thuộc tính same site thành lax để cho phép cookie được đặt trên các miền khác nhau trong trường hợp chúng ta chạy trong sản xuất trên một URL khác.

14:28

But also for local development, this will be useful as well as the secure property which we only want to be set inside of production.

Nhưng cũng cho phát triển cục bộ, điều này sẽ hữu ích cũng như thuộc tính secure mà chúng ta chỉ muốn đặt bên trong sản xuất.

14:37

So we can check process.nodem.

Vì vậy, chúng ta có thể kiểm tra process.nodem.

14:39

If this is equal to production, then we'll use secure HTTP cookies, which means we need to be on HTTPS or have the connection encrypted in order for the cookies to be used to keep our JWT secure.

Nếu cái này bằng production, thì chúng ta sẽ sử dụng cookie HTTP bảo mật, có nghĩa là chúng ta cần ở trên HTTPS hoặc có kết nối được mã hóa để cookie được sử dụng nhằm giữ JWT của chúng ta an toàn.

14:53

But in local

Nhưng trong phát triển cục bộ

14:55

development on HTTP local host, this will not be the case.

trên HTTP localhost, điều này sẽ không xảy ra.

14:59

So now we fully configured the better off object.

Vì vậy, bây giờ chúng ta đã cấu hình đầy đủ đối tượng better off.

15:02

So our next step is going to be to actually use Drizzle Kit, which is going to be the tool we use to generate migrations.

Vì vậy, bước tiếp theo của chúng ta là thực sự sử dụng Drizzle Kit, công cụ chúng ta sẽ sử dụng để tạo migrations.

15:12

We need to generate our database migrations based off of our better o schema to actually create the users and necessary authentication tables on the database.

Chúng ta cần tạo migrations cơ sở dữ liệu dựa trên schema better o của chúng ta để thực sự tạo người dùng và các bảng xác thực cần thiết trên cơ sở dữ liệu.

15:22

So for this I'm going to go ahead and create a new docker compose yaml file at the root and paste in a new services configuration to run postgress 16.

Vì vậy, tôi sẽ tạo một tệp docker compose yaml mới ở thư mục gốc và dán vào một cấu hình services mới để chạy postgress 16.

15:31

Now I'm not going to go through all of these details but it's just a basic configuration to allow us to run postgress in this environment using docker.

Bây giờ tôi sẽ không đi qua tất cả các chi tiết này nhưng nó chỉ là một cấu hình cơ bản để cho phép chúng ta chạy postgress trong môi trường này bằng docker.

15:40

So make sure you have docker and docker compose all set up and installed

Vì vậy, hãy đảm bảo bạn đã cài đặt docker và docker compose

15:45

on your machine and launch a new terminal to go ahead and start it up.

trên máy của bạn và mở một terminal mới để khởi động nó.

15:50

So in the second terminal, I'll run docker compose up to go ahead and pull and start up this Postgress container so that we can actually connect to it locally.

Vì vậy, trong terminal thứ hai, tôi sẽ chạy docker compose up để kéo và khởi động container Postgress này để chúng ta có thể kết nối với nó cục bộ.

16:00

So now you can see that I've started up my Postgress database.

Vì vậy, bây giờ bạn có thể thấy rằng tôi đã khởi động cơ sở dữ liệu Postgress của mình.

16:04

And so now that we have Postgress running on our machine, head back to the M.

Và bây giờ khi đã có Postgres chạy trên máy, hãy quay lại M.

16:09

And now

Và bây giờ

16:10

I'm going to configure the database URL to be the connection string to our docker compos postgress where we have the username and password which we've defined both as Postgress and then the connection is localhost 5432 because we are port forwarding this on our docker compose so we can access it on localhost and at the app database.

Tôi sẽ cấu hình URL cơ sở dữ liệu thành chuỗi kết nối tới Postgres trong docker compose, nơi chúng ta có tên người dùng và mật khẩu đều là Postgres, và kết nối là localhost 5432 vì chúng ta đang chuyển tiếp cổng này trong docker compose để có thể truy cập qua localhost và tới cơ sở dữ liệu ứng dụng.

16:32

So in order to generate our Drizzle OM types from our

Để tạo kiểu Drizzle OM từ

16:37

better off setup, we can use the better off CLI.

thiết lập better off, chúng ta có thể sử dụng CLI của better off.

16:40

To do this, head back to the terminal and make sure we cd into apps API and set up the following bunx command.

Để làm điều này, quay lại terminal và đảm bảo cd vào apps API và chạy lệnh bunx sau.

16:49

So we're going to use at better off/ CLI generate and point the output to source DB schema ts.

Chúng ta sẽ sử dụng better-off/CLI generate và trỏ đầu ra tới source DB schema ts.

16:56

Now we need to also make sure that we specify the config path to point to our O file which better off CLI actually reads in to

Bây giờ chúng ta cũng cần chỉ định đường dẫn cấu hình trỏ tới tệp O mà CLI better off đọc để

17:06

generate the appropriate database driver types in this case drizzle.

tạo ra các kiểu driver cơ sở dữ liệu phù hợp, trong trường hợp này là drizzle.

17:11

So we'll point to source/ts.

Vì vậy chúng ta sẽ trỏ tới source/ts.

17:14

So now after running this command it's going to ask us if we want to generate the schema.

Sau khi chạy lệnh này, nó sẽ hỏi chúng ta có muốn tạo schema không.

17:20

Go ahead and select yes.

Hãy chọn yes.

17:22

And now we've successfully generated our database schema.

Và bây giờ chúng ta đã tạo thành công schema cơ sở dữ liệu.

17:25

If we actually head back into API source DB, you can see we have this new schema ts file which is going to be the drizzle or typescript types for all of our database tables that better off needs to create.

Nếu quay lại API source DB, bạn có thể thấy tệp schema ts mới này, đó sẽ là các kiểu TypeScript cho drizzle của tất cả các bảng cơ sở dữ liệu mà better off cần tạo.

17:40

So this is awesome.

Thật tuyệt vời.

17:42

All done for us out of the box.

Mọi thứ đã được làm sẵn cho chúng ta.

17:45

And now what we can do is actually generate raw SQL migrations from this better off schema to update our database.

Và bây giờ chúng ta có thể tạo các migration SQL thô từ schema better off này để cập nhật cơ sở dữ liệu.

17:53

So for this we will add a new file to API called drizzle config ts which is going to be the configuration for drizzle kit to execute our migrations.

Để làm điều này, chúng ta sẽ thêm một tệp mới vào API có tên drizzle config ts, đây là cấu hình cho drizzle kit để thực thi migration.

18:06

So here we're going to export default define config from Drizzle kit.

Ở đây chúng ta sẽ export default define config từ Drizzle kit.

18:11

Point the raw schema file in Typescript to the schema that was just generated by better off which has all of our Postgress tables and columns and foreign keys and relations.

Trỏ tệp schema thô bằng TypeScript tới schema vừa được tạo bởi better off, nơi có tất cả các bảng, cột, khóa ngoại và quan hệ của Postgres.

18:24

And so we point that to Drizzle kit tell it to generate our migrations to a Drizzle folder.

Và chúng ta trỏ tới Drizzle kit, yêu cầu nó tạo migration vào thư mục Drizzle.

18:32

use PostgresQL and pass in the database URL as the DB credentials and finally use snake case casing.

Sử dụng PostgresQL và truyền URL cơ sở dữ liệu làm thông tin xác thực DB, và cuối cùng sử dụng kiểu snake case.

18:40

So with this in place we can now use drizzle kit to generate our migrations.

Với điều này, chúng ta có thể sử dụng drizzle kit để tạo migration.

18:46

So we're going to run bunx drizzle kit generate to generate the raw SQL migrations.

Chúng ta sẽ chạy bunx drizzle kit generate để tạo migration SQL thô.

18:53

So now we have the Drizzle folder with the raw SQL to actually create our tables with the expected columns.

Bây giờ chúng ta có thư mục Drizzle với SQL thô để thực sự tạo các bảng với các cột mong đợi.

19:02

To now actually execute it, we just run drizzle kit migrate.

Để thực thi, chúng ta chỉ cần chạy drizzle kit migrate.

19:08

Now our migrations are successfully applied and our database is now up to date with our better off schema, which is awesome.

Bây giờ migration đã được áp dụng thành công và cơ sở dữ liệu đã được cập nhật với schema better off, thật tuyệt.

19:16

So now then the last step is to make sure we have everything wired together by going back to our app.module and in our imports array make sure we now add the O module from thalisp nestgjs better off call for root on it which will allow us to then pass in our

Bước cuối cùng là đảm bảo mọi thứ được kết nối bằng cách quay lại app.module và trong mảng imports, thêm module O từ thalisp nestgjs better off call for root, cho phép chúng ta truyền vào

19:37

o configuration object which is amazing because what this is going to do is actually now create the underlying nest SJS controllers for all of the authentication endpoints that Better Off supports like creating new accounts, signing them in with the chosen authentication methods, and also applying authentication against all of our routes by default, which means any

đối tượng cấu hình O, điều này thực sự sẽ tạo ra các controller NestJS cho tất cả các endpoint xác thực mà Better Off hỗ trợ như tạo tài khoản mới, đăng nhập với các phương thức xác thực đã chọn, và cũng áp dụng xác thực cho tất cả các route của chúng ta theo mặc định, nghĩa là bất kỳ

20:03

new routes that we define in the app will automatically have authentication required through our JWT cookie that better off creates and verifies using our secret value.

route mới nào chúng ta định nghĩa trong ứng dụng sẽ tự động yêu cầu xác thực thông qua cookie JWT mà better off tạo và xác minh bằng giá trị bí mật của chúng ta.

20:13

So just like this, we've now added authentication into our NestJS backend.

Chỉ như vậy, chúng ta đã thêm xác thực vào backend NestJS.

20:17

There are a few more tweaks we have to make to the server maints file to have better off NestJS work.

Có một vài điều chỉnh nữa cần thực hiện trong tệp server maints để better off NestJS hoạt động.

20:25

The first of which is to configure

Đầu tiên là cấu hình

20:28

the create call on Nest Factory.

lệnh gọi create trên Nest Factory.

20:30

We want to set body parser to false because better off has to read the raw request body and thalospgs better off will reapply parsers for non-author requests.

Chúng ta muốn đặt body parser thành false vì better off cần đọc nội dung yêu cầu thô và thalospgs better off sẽ áp dụng lại parser cho các yêu cầu không phải xác thực.

20:44

We also want to get access to the web URL.

Chúng ta cũng muốn lấy URL web.

20:47

So we're going to again check the process M for the web URL or use our default for our vite server.

Vì vậy chúng ta sẽ kiểm tra process M cho URL web hoặc sử dụng mặc định cho máy chủ vite.

20:56

And here we want to make sure that we call enable cores on this origin so that we can allow for cross origin resource sharing which is essentially going to allow requests to execute and succeed from different origins which in our case we

Và ở đây chúng ta muốn gọi enable cores trên origin này để cho phép chia sẻ tài nguyên giữa các nguồn gốc, điều này sẽ cho phép các yêu cầu thực thi và thành công từ các nguồn gốc khác nhau, trong trường hợp của chúng ta

21:13

want because we're going to be running our UI on a different URL in this case locost 5173 in production.

chúng ta muốn điều này vì chúng ta sẽ chạy UI trên một URL khác, trong trường hợp này là localhost 5173 trong môi trường production.

21:19

If you have on the same URL you might not need this.

Nếu bạn có cùng URL, bạn có thể không cần điều này.

21:23

We're going to set credentials to true so we can also pass our HTTP cookies.

Chúng ta sẽ đặt credentials thành true để cũng có thể truyền cookie HTTP.

21:28

And now our Bootstrap method is also configured which is excellent.

Và bây giờ phương thức Bootstrap cũng đã được cấu hình, thật tuyệt.

21:31

Now the last thing we need to do is make sure that we go back to our API package JSON and we want to now use this M CLI.

Điều cuối cùng cần làm là quay lại API package JSON và sử dụng CLI M này.

21:41

And so this dev command that we're running, we want to make sure we load in our environment variable from our new m before starting the app since we're not using the Nest.js config module.

Và lệnh dev này chúng ta đang chạy, chúng ta muốn đảm bảo tải biến môi trường từ tệp M mới trước khi khởi động ứng dụng vì chúng ta không sử dụng module cấu hình của Nest.js.

21:53

So for

Vì vậy để

21:54

this to use the M CLI, all we have to do is call M and then call nest start, which by default will load in M files at the root, which we've already have here, which is great, just what we want.

sử dụng CLI M, tất cả những gì chúng ta cần làm là gọi M và sau đó gọi nest start, theo mặc định sẽ tải các tệp M ở thư mục gốc, mà chúng ta đã có ở đây, thật tuyệt, đúng như mong muốn.

22:08

So that should work out of the box.

Vậy là nó sẽ hoạt động ngay.

22:11

Importantly, make sure we also go back to the M where we need to define our other better off environment variables.

Quan trọng là đảm bảo quay lại M nơi chúng ta cần định nghĩa các biến môi trường better off khác.

22:20

So for our better off secret, we will define this here.

Vì vậy cho secret better off, chúng ta sẽ định nghĩa nó ở đây.

22:24

For secret values, I like to go to randomkeygen.com and simply copy some one of these random values.

Đối với các giá trị bí mật, tôi thích vào randomkeygen.com và chỉ cần sao chép một trong các giá trị ngẫu nhiên này.

22:32

And I'll just paste that in since this is a secure random value.

Và tôi sẽ dán nó vào vì đây là một giá trị ngẫu nhiên an toàn.

22:36

And then we have the better off URL which we know is just going to use again that default localhost 3000 which is the server URL and we can also explicitly define the web URL which is also pointing to our vite server.

Và sau đó chúng ta có URL better off mà chúng ta biết sẽ sử dụng lại localhost 3000 mặc định, đó là URL máy chủ, và chúng ta cũng có thể xác định rõ ràng URL web cũng trỏ đến máy chủ vite của chúng ta.

22:53

So now these are all the environment variables we need and we're correctly loading them in before the dev

Vậy bây giờ đây là tất cả các biến môi trường chúng ta cần và chúng ta đang tải chúng một cách chính xác trước lệnh dev

23:00

command.

23:00

So now if we go back to the root and you try running turbo dev to start up the server again, you'll see it quickly loaded in the environment variables and the application started up.

Vậy bây giờ nếu chúng ta quay lại thư mục gốc và thử chạy turbo dev để khởi động lại máy chủ, bạn sẽ thấy nó đã nhanh chóng tải các biến môi trường và ứng dụng đã khởi động.

23:12

You can see we have a warning from better off here about our secret being too short.

Bạn có thể thấy chúng ta có một cảnh báo từ better off về việc secret của chúng ta quá ngắn.

23:18

So it actually has a nice command to run to generate this.

Vì vậy, nó thực sự có một lệnh hữu ích để chạy nhằm tạo ra secret này.

23:22

So we should be able to run bunx off secret to generate

Vì vậy, chúng ta có thể chạy bunx off secret để tạo

23:27

one.

một secret.

23:27

So we'll go ahead and just copy this better off secret that it gave us which is going to be one that is recommended and secure by better off.

Vì vậy, chúng ta sẽ sao chép secret better off mà nó đã cung cấp, đó là secret được khuyến nghị và an toàn bởi better off.

23:36

So go ahead and swap that out.

Hãy thay thế nó.

23:38

But now this shows us that better off is actually integrating and working as expected which is awesome.

Nhưng điều này cho thấy better off thực sự đang tích hợp và hoạt động như mong đợi, thật tuyệt vời.

23:44

We can see the O module has initialized successfully.

Chúng ta có thể thấy module O đã khởi tạo thành công.

23:47

And so now with everything set up in our

Và bây giờ với mọi thứ đã được thiết lập trong máy chủ ứng dụng

23:50

application server running, we should be able to go to localhost 3000 which is our Nest server address slash API which is a path prefix that better off uses API at slash off which is what the better off requests go through sl okay endpoint which is a default endpoint that NestJS better off will expose if our setup is working properly and our o endpoints are ready to go.

của chúng ta đang chạy, chúng ta có thể truy cập localhost 3000, địa chỉ máy chủ Nest của chúng ta, theo sau là /API, một tiền tố đường dẫn mà better off sử dụng API tại /off, đó là nơi các yêu cầu better off đi qua /ok endpoint, một endpoint mặc định mà NestJS better off sẽ hiển thị nếu thiết lập của chúng ta hoạt động tốt và các endpoint o của chúng ta đã sẵn sàng.

24:20

You

Bạn

24:21

can see here we are getting a successful response back which means we've successfully configured our server for authentication and we have it applied to all routes which is awesome.

có thể thấy ở đây chúng ta nhận được phản hồi thành công, điều đó có nghĩa là chúng ta đã cấu hình thành công máy chủ cho xác thực và áp dụng nó cho tất cả các route, thật tuyệt vời.

24:30

Now to finally go ahead and show you how this works and we're going to add some quick endpoints that will be used inside of our React UI.

Bây giờ để cuối cùng trình bày cách thức hoạt động và chúng ta sẽ thêm một số endpoint nhanh sẽ được sử dụng trong giao diện React của chúng ta.

24:38

So for this let's head back to the O controller and I want to

Vì vậy, hãy quay lại O controller và tôi muốn

24:43

add a new get route that will be at slashme to get my current session for example.

thêm một route GET mới tại /me để lấy session hiện tại của tôi chẳng hạn.

24:48

Now, better off has their own internal endpoints we can use to get the session and we'll see how we can do that when we use but I want to create an endpoint here to show you how we can actually extract our current logged in session using the at session decorator from fallspgs better

Better off có các endpoint nội bộ riêng mà chúng ta có thể sử dụng để lấy session và chúng ta sẽ thấy cách thực hiện khi sử dụng, nhưng tôi muốn tạo một endpoint ở đây để cho bạn thấy cách chúng ta có thể trích xuất session đăng nhập hiện tại bằng decorator @session từ fallspgs better

25:08

off.

25:08

So this will allow us to pull off the current user session because remember all of our endpoints will have our JWT authentication automatically applied and this session will automatically be populated at this point if the user was successfully authenticated which allows you to read on that session to see what the current user looks like.

Điều này sẽ cho phép chúng ta lấy session người dùng hiện tại vì hãy nhớ rằng tất cả các endpoint của chúng ta sẽ tự động áp dụng xác thực JWT và session này sẽ tự động được điền vào thời điểm này nếu người dùng đã được xác thực thành công, cho phép bạn đọc session đó để xem người dùng hiện tại trông như thế nào.

25:31

So all their properties

Vì vậy, tất cả các thuộc tính của họ

25:33

or check the session object itself which is what's stored in the database.

hoặc kiểm tra đối tượng session, đó là những gì được lưu trữ trong cơ sở dữ liệu.

25:38

So let's just return that back to the caller for now.

Vì vậy, hãy trả về nó cho người gọi ngay bây giờ.

25:42

And if you get some issue about isolated modules here, you can just go to your TS config and set isolated modules to false.

Và nếu bạn gặp vấn đề về isolated modules, bạn có thể vào tệp ts config và đặt isolated modules thành false.

25:51

And that should rectify that issue.

Và điều đó sẽ khắc phục vấn đề đó.

25:53

Now notice if we try going to locost 3000/me, you'll notice that we get this unauthorized response coming back from better off, which is excellent.

Bây giờ hãy chú ý nếu chúng ta thử truy cập localhost 3000/me, bạn sẽ thấy chúng ta nhận được phản hồi unauthorized từ better off, điều này thật tuyệt vời.

26:03

exactly

chính xác

26:04

what we'd expect to see because all of our endpoints have authentication by default and of course here we're not actually supplying any JWT cookie.

những gì chúng ta mong đợi vì tất cả các endpoint của chúng ta đều có xác thực theo mặc định và tất nhiên ở đây chúng ta không cung cấp bất kỳ cookie JWT nào.

26:12

So of course we are failing to actually execute the route and we have our authentication successfully applied which is showing our authentication working.

Vì vậy, tất nhiên chúng ta không thể thực thi route và xác thực của chúng ta đã được áp dụng thành công, cho thấy xác thực của chúng ta đang hoạt động.

26:20

And so we'll see how we can call this from our React UI next with

Và chúng ta sẽ thấy cách gọi endpoint này từ giao diện React của chúng ta tiếp theo với

26:26

the JWT cookie.

cookie JWT.

26:27

We also have a decorator called allow anonymous which allows unauthenticated access to a route.

Chúng ta cũng có một decorator gọi là allow anonymous cho phép truy cập không cần xác thực vào một route.

26:33

So this will allow a route to be executed with no JWT cookie.

Vì vậy, điều này sẽ cho phép một route được thực thi mà không cần cookie JWT.

26:38

And I'll show you this if we have this new get/public route.

Và tôi sẽ chỉ cho bạn điều này nếu chúng ta có route GET /public mới này.

26:43

Since it has the allow anonymous decorator, this should be able to get executed and we should be able to return this JSON object where I'll say anyone can read

Vì nó có decorator allow anonymous, route này sẽ được thực thi và chúng ta có thể trả về đối tượng JSON này, nơi tôi sẽ nói bất kỳ ai cũng có thể đọc

26:56

this.

cái này.

26:56

And so let's test that out.

Và hãy kiểm tra điều đó.

26:58

If we now go back to slash public, you can see we get the response with no off.

Nếu bây giờ chúng ta quay lại /public, bạn có thể thấy chúng ta nhận được phản hồi mà không có off.

27:05

So that's how that decorator works and can be quite useful.

Đó là cách decorator đó hoạt động và có thể khá hữu ích.

27:10

So now at this point, our NestJS backend is fully completed and set up and we're ready to go.

Vậy bây giờ, backend NestJS của chúng ta đã hoàn thành và sẵn sàng.

27:16

Let's go ahead and now integrate our React UI with Tanstack router and we'll see how we can apply our better off React integration to this Nest.js backend.

Hãy tiếp tục tích hợp giao diện React của chúng ta với Tanstack router và chúng ta sẽ thấy cách áp dụng tích hợp better off React vào backend Nest.js này.

27:26

Now, finally, make sure that we head back into our index.ts where we set up our database connection to Drizzle and actually provide our

Bây giờ, cuối cùng, hãy đảm bảo quay lại tệp index.ts nơi chúng ta thiết lập kết nối cơ sở dữ liệu với Drizzle và thực sự cung cấp

27:35

database schema now, which we can go ahead and import the schema from our local schema file, which is going to contain all of those Drizzle RM types for our underlying better off schema.

schema cơ sở dữ liệu của chúng ta, chúng ta có thể import schema từ tệp schema cục bộ, tệp này sẽ chứa tất cả các kiểu Drizzle ORM cho schema better off cơ bản của chúng ta.

27:49

At the very bottom here, we'll add this schema export, which will include all of the different types.

Ở cuối cùng, chúng ta sẽ thêm export schema này, bao gồm tất cả các kiểu khác nhau.

27:57

So, we have the user, session, account, and verification that we're all exporting and now making

Vì vậy, chúng ta có user, session, account và verification mà chúng ta đều đang export và bây giờ làm cho

28:04

available to the Drizzle client.

chúng có sẵn cho Drizzle client.

28:06

All right.

Được rồi.

28:06

So, next up, in order to start generating our web UI, let's go ahead and cd back into the apps directory where we can run the command bunx create ts router app for tanstack router.

Tiếp theo, để bắt đầu tạo giao diện web, chúng ta hãy cd vào thư mục apps, nơi chúng ta có thể chạy lệnh bunx create ts router app cho tanstack router.

28:21

This will go ahead and prompt us for the framework.

Lệnh này sẽ nhắc chúng ta chọn framework.

28:25

We'll choose React.

Chúng ta sẽ chọn React.

28:26

For the name, I'll just call this web.

Về tên, tôi sẽ đặt là web.

28:30

None.

Không.

28:30

No.

Không.

28:31

And continue with the settings.

Và tiếp tục với các cài đặt.

28:33

So, this will go ahead and generate us a brand new React application in the web directory with the Vite dev server automatically configured with Tanstack router, which is excellent.

Vậy, điều này sẽ tạo ra một ứng dụng React hoàn toàn mới trong thư mục web với máy chủ phát triển Vite được cấu hình tự động với Tanstack router, thật tuyệt vời.

28:46

So you can see we have the source directory with our starting code index html loading in the main file main tsx here we set up the react application

Bạn có thể thấy chúng ta có thư mục source với mã khởi đầu index.html, tải vào file chính main.tsx, nơi chúng ta thiết lập ứng dụng React.

29:00

initializing the tanstack router and bootstrapping our react application on the root element inside of our index html.

khởi tạo tanstack router và khởi động ứng dụng React trên phần tử gốc bên trong index.html.

29:07

We also have the router tsx component which is actually exporting the create tanstack router function.

Chúng ta cũng có component router.tsx, thực tế đang xuất hàm create tanstack router.

29:13

And here we set up the router provider which then injects the router that we've created.

Và ở đây chúng ta thiết lập router provider, sau đó inject router mà chúng ta đã tạo.

29:19

So this is going to make the router globally available inside of the

Điều này sẽ làm cho router có sẵn trên toàn cầu bên trong

29:25

React context.

29:25

And this router will automatically render any routes that we've configured inside of the routes directory.

Và router này sẽ tự động render bất kỳ route nào chúng ta đã cấu hình bên trong thư mục routes.

29:31

So in the routes directory we have the root component which is going to be rendered everywhere in our application.

Trong thư mục routes, chúng ta có component gốc sẽ được render ở mọi nơi trong ứng dụng.

29:39

And here we define the route using create root route function and then pointing it at the component we want to render at the root.

Và ở đây chúng ta định nghĩa route bằng hàm create root route và trỏ nó đến component chúng ta muốn render ở gốc.

29:47

In this case we use the special outlet component from React router in Tanstack to render the current component that we're on as well as set up Tanstack dev tools.

Trong trường hợp này, chúng ta sử dụng component outlet đặc biệt từ React router trong Tanstack để render component hiện tại cũng như thiết lập Tanstack dev tools.

29:58

And then it is simply a file-based router from here on.

Và từ đây, nó đơn giản là một router dựa trên file.

30:02

So since we're at the root of the router, the index.tsx that we render at the root is going to be the component that we have here.

Vì chúng ta đang ở gốc của router, index.tsx mà chúng ta render ở gốc sẽ là component chúng ta có ở đây.

30:10

In this case, we have the root route created with the create file route function, which takes in the path of the route.

Trong trường hợp này, chúng ta có route gốc được tạo bằng hàm create file route, nhận đường dẫn của route.

30:16

In this case, here at the root, the component we want to render.

Ở đây, tại gốc, component chúng ta muốn render.

30:20

Critically, we've also added the package.json where we have the dev

Quan trọng là chúng ta cũng đã thêm package.json, nơi có lệnh dev

30:24

command to start up the Vite server.

để khởi động máy chủ Vite.

30:26

Let's get rid of the default port that we're assigning because we want the 5173 port, the default Vite port.

Hãy loại bỏ cổng mặc định mà chúng ta đang gán vì chúng ta muốn cổng 5173, cổng Vite mặc định.

30:33

And now if we go back to the root of our Turbo repo and now try running turbo dev, this is going to execute the dev task in both our API to start up our NestJS dev server, but also the Vite dev server, which compiles our React application and makes it available.

Và bây giờ nếu chúng ta quay lại thư mục gốc của Turbo repo và thử chạy turbo dev, lệnh này sẽ thực thi tác vụ dev trong cả API để khởi động máy chủ phát triển NestJS, cũng như máy chủ phát triển Vite, biên dịch ứng dụng React và làm cho nó có sẵn.

30:52

So go ahead and open

Hãy mở

30:54

it up on localhost 5173.

nó trên localhost 5173.

30:57

And now here we can see the Tanstack welcome page which is excellent since we're on the root of the application.

Và bây giờ ở đây chúng ta có thể thấy trang chào mừng của Tanstack, thật tuyệt vì chúng ta đang ở gốc của ứng dụng.

31:06

This is going to correspond to the index.tsx where we have our welcome screen here.

Điều này sẽ tương ứng với index.tsx, nơi chúng ta có màn hình chào mừng ở đây.

31:10

So this is excellent.

Vậy thật tuyệt vời.

31:12

So now at this point we have our React UI ready to go with Tanstack router all set up.

Vậy bây giờ chúng ta đã có giao diện React sẵn sàng với Tanstack router đã được thiết lập.

31:18

And now we're ready to integrate Better Auth into this so that we make sure that users can sign up and sign in as well as protect certain routes because we only want to allow authenticated users to access our

Và bây giờ chúng ta đã sẵn sàng tích hợp Better Auth vào để đảm bảo người dùng có thể đăng ký và đăng nhập cũng như bảo vệ một số route vì chúng ta chỉ muốn cho phép người dùng đã xác thực truy cập vào

31:31

application.

ứng dụng.

31:31

So we're going to see how we can set this all up next with Better Auth.

Vậy chúng ta sẽ xem cách thiết lập tất cả điều này tiếp theo với Better Auth.

31:36

So now the web package is available.

Vậy bây giờ gói web đã có sẵn.

31:39

Let's go ahead and install the dependencies we need to integrate Better Auth into it.

Hãy cài đặt các phụ thuộc cần thiết để tích hợp Better Auth vào nó.

31:44

So, I'll kill our server and head back into apps/web and let's run bun install to add Better Auth, which is really the only dependency that we're going to need.

Vậy, tôi sẽ dừng máy chủ và quay lại apps/web và chạy bun install để thêm Better Auth, đây thực sự là phụ thuộc duy nhất chúng ta cần.

31:54

So, now that we

Vậy, bây giờ chúng ta

31:56

have that available, we can integrate it.

đã có nó, chúng ta có thể tích hợp.

31:58

And I'll reset my development server.

Và tôi sẽ khởi động lại máy chủ phát triển.

32:01

Notice we also have Tailwind CSS already available thanks to Vite, which is a great developer server and experience all around.

Lưu ý rằng chúng ta cũng đã có Tailwind CSS sẵn nhờ Vite, một máy chủ phát triển và trải nghiệm tuyệt vời.

32:10

So now to wire in Better Auth, what we're going to do is create a new Auth client with the Better Auth React SDK.

Vậy để kết nối Better Auth, chúng ta sẽ tạo một Auth client mới với Better Auth React SDK.

32:19

So inside of source, let's create a new auth-client.ts file.

Vậy bên trong source, hãy tạo một file auth-client.ts mới.

32:24

And here we can export const from better-auth/react.

Và ở đây chúng ta có thể export const from better-auth/react.

32:33

Here we then specify the base URL which is where our backend server that has Better Auth configured is pointing to so that we can automatically use this SDK to make requests using Better Auth like to sign in, create accounts, and more, and it'll automatically call our backend which we have Better Auth configured under.

Ở đây chúng ta chỉ định base URL, đó là nơi máy chủ backend có Better Auth được cấu hình trỏ đến, để chúng ta có thể tự động sử dụng SDK này để thực hiện các yêu cầu sử dụng Better Auth như đăng nhập, tạo tài khoản, v.v., và nó sẽ tự động gọi backend của chúng ta, nơi chúng ta đã cấu hình Better Auth.

32:56

So for the base URL, we're going to use import.meta.env.VITE_API_URL as

Vậy cho base URL, chúng ta sẽ sử dụng import.meta.env.VITE_API_URL làm

33:01

the environment variable that we can set up shortly or we can set this to localhost 3000 which is our NestJS default API address.

biến môi trường mà chúng ta có thể thiết lập sau hoặc chúng ta có thể đặt thành localhost 3000, địa chỉ API mặc định của NestJS.

33:10

So feel free to create a .env inside of web and set up this environment variable.

Vậy hãy tạo một file .env bên trong web và thiết lập biến môi trường này.

33:16

This will be available and we can change this depending on our backend location.

Biến này sẽ có sẵn và chúng ta có thể thay đổi tùy theo vị trí backend.

33:21

In our case, we'll just keep it at the local backend here.

Trong trường hợp của chúng ta, chúng ta sẽ chỉ giữ nó ở backend cục bộ ở đây.

33:25

So, this will

Vì vậy, điều này sẽ

33:27

configure our React requests for Better Auth to now go to our NestJS server, which is excellent.

cấu hình các yêu cầu React của chúng ta cho Better Auth để bây giờ chúng sẽ đi đến máy chủ NestJS của chúng ta, điều này thật tuyệt vời.

33:34

Let's go ahead and also export the methods on this Auth client that we're going to use in this project.

Hãy tiếp tục và cũng xuất các phương thức trên Auth client này mà chúng ta sẽ sử dụng trong dự án này.

33:41

So, I'll go ahead and export all of these.

Vì vậy, tôi sẽ xuất tất cả những cái này.

33:45

We have signIn, signUp, and signOut, as well as useSession, which is a hook to get access to the current active session when we're logged in, as well as getSession to fetch it programmatically.

Chúng ta có signIn, signUp và signOut, cũng như useSession, một hook để truy cập vào session hiện tại khi chúng ta đã đăng nhập, và getSession để lấy nó theo cách lập trình.

33:58

And so here we'll pull all of these off the Auth client and export them just for ease of use.

Và ở đây chúng ta sẽ lấy tất cả những cái này từ Auth client và xuất chúng ra để dễ sử dụng.

34:03

And this is the real beauty of the Better Auth React client: we don't have to worry about making and setting up these raw fetch requests to our backend and dealing with all that code.

Và đây là vẻ đẹp thực sự của Better Auth React client: chúng ta không phải lo lắng về việc tạo và thiết lập các yêu cầu fetch thô tới backend và xử lý tất cả mã đó.

34:13

Instead, we just use these pre-built functions set up that will take care of calling our backend since

Thay vào đó, chúng ta chỉ sử dụng các hàm được xây dựng sẵn này, chúng sẽ xử lý việc gọi backend của chúng ta vì

34:18

it's set up with the standard Better Auth setup, which is amazing.

nó được thiết lập với thiết lập Better Auth tiêu chuẩn, điều này thật tuyệt vời.

34:21

Now, the first thing that I want to go ahead and get set up are our login and signup screens so that we can actually create new accounts using our Better Auth client and sign them in to get access to that secure JWT cookie, which we'll then use to protect the rest of our application from access.

Bây giờ, điều đầu tiên tôi muốn thiết lập là các màn hình đăng nhập và đăng ký để chúng ta có thể thực sự tạo tài khoản mới bằng Auth client của chúng ta và đăng nhập chúng để có quyền truy cập vào cookie JWT an toàn, sau đó chúng ta sẽ sử dụng nó để bảo vệ phần còn lại của ứng dụng khỏi truy cập trái phép.

34:41

So for this, let's go ahead and inside of source, we'll create two new routes at the root of the app.

Vì vậy, hãy vào bên trong source, chúng ta sẽ tạo hai route mới ở gốc của ứng dụng.

34:48

So since we're using Tanstack router, that will have to be inside of the routes folder for these to be new routes.

Vì chúng ta đang sử dụng Tanstack router, điều đó sẽ phải nằm trong thư mục routes để chúng trở thành các route mới.

34:55

And so this will be at /signup, which will show a call then file name signup.

Và cái này sẽ ở /signup, nó sẽ hiển thị một tệp có tên signup.

35:01

And we'll do this same thing for login.tsx.

Và chúng ta sẽ làm tương tự cho login.tsx.

35:04

And this is really convenient.

Và điều này thực sự tiện lợi.

35:05

You can see when we create new components, they're automatically filled in with this JSX, including a call to createFileRoute to register inside of Tanstack React Router and declare the path and set up a stub component.

Bạn có thể thấy khi chúng ta tạo các component mới, chúng tự động được điền sẵn với JSX này, bao gồm một lệnh gọi createFileRoute để đăng ký bên trong Tanstack React Router và khai báo đường dẫn và thiết lập một component giả.

35:20

So that's really nice to see.

Vì vậy, thật tuyệt khi thấy điều đó.

35:22

We should see the development server refresh, update our Tanstack router types to make sure

Chúng ta nên thấy máy chủ phát triển làm mới, cập nhật các kiểu Tanstack router của chúng ta để đảm bảo

35:28

everything's still type safe.

mọi thứ vẫn an toàn về kiểu.

35:29

And now we should be able to go to /login and see that component.

Và bây giờ chúng ta có thể truy cập /login và thấy component đó.

35:34

Same thing with /signup.

Tương tự với /signup.

35:35

So that's excellent to see.

Vì vậy, thật tuyệt khi thấy điều đó.

35:37

So I've gone ahead and replaced the signup page here with some JSX to actually create a new signup form.

Vì vậy, tôi đã thay thế trang signup ở đây bằng một số JSX để thực sự tạo một form đăng ký mới.

35:44

You can feel free to copy this over from the GitHub repository.

Bạn có thể tự do sao chép cái này từ kho lưu trữ GitHub.

35:48

Essentially, I've set up some React state to get access to the email, name, and password.

Về cơ bản, tôi đã thiết lập một số state React để truy cập vào email, tên và mật khẩu.

35:53

We've also set up an onSubmit handler that gets invoked when we submit our form.

Chúng ta cũng đã thiết lập một trình xử lý onSubmit được gọi khi chúng ta gửi form.

35:59

And so in here, we set up our state.

Và ở đây, chúng ta thiết lập state của mình.

36:02

And importantly, we now use the signUp method from our Auth client.

Và quan trọng là, bây giờ chúng ta sử dụng phương thức signUp từ Auth client của chúng ta.

36:07

So notice here I've imported signUp from the auth-client.

Vì vậy, hãy lưu ý rằng tôi đã import signUp từ auth-client.

36:10

This is where we've exported it from our auth-client.

Đây là nơi chúng ta đã xuất nó từ auth-client của chúng ta.

36:13

And

Và

36:14

now we can directly call the email method on this signUp object which allows us to use our email and password authentication to try and authenticate a new user and sign them up.

bây giờ chúng ta có thể gọi trực tiếp phương thức email trên đối tượng signUp này, cho phép chúng ta sử dụng xác thực email và mật khẩu để thử xác thực một người dùng mới và đăng ký họ.

36:25

So with this method call we will make a request to our backend with Better Auth configured which has already set up the routes thanks to @better-auth.

Với lệnh gọi phương thức này, chúng ta sẽ gửi một yêu cầu đến backend của chúng ta với Better Auth đã được cấu hình, nó đã thiết lập các route nhờ @better-auth.

36:34

We have some basic error handling else we

Chúng ta có một số xử lý lỗi cơ bản, nếu không thì chúng ta

36:37

navigate back to the root of the app.

điều hướng trở lại gốc của ứng dụng.

36:40

And so in this JSX I just have some very simple JSX with some form including some input fields, a button to submit the form, and some links to go to the login page.

Và trong JSX này, tôi chỉ có một số JSX rất đơn giản với một form bao gồm một số trường nhập, một nút để gửi form và một số liên kết để đến trang đăng nhập.

36:55

So now if we go back to /signup and refresh, you should see we now have this signup component.

Vì vậy, bây giờ nếu chúng ta quay lại /signup và làm mới, bạn sẽ thấy bây giờ chúng ta có component signup này.

37:01

I've also updated our root style CSS here to have a default dark theme and updated some fonts just to make things look a bit nicer here.

Tôi cũng đã cập nhật CSS kiểu gốc của chúng ta ở đây để có chủ đề tối mặc định và cập nhật một số phông chữ chỉ để làm cho mọi thứ trông đẹp hơn một chút.

37:10

So feel free to copy this over as well.

Vì vậy, hãy tự do sao chép cái này.

37:14

This is the root style CSS that we import in the root of our application.

Đây là CSS kiểu gốc mà chúng ta import vào gốc của ứng dụng.

37:18

So that will always be available.

Vì vậy, nó sẽ luôn có sẵn.

37:21

And so now you can see we have this nice looking signup form to create a new user.

Và bây giờ bạn có thể thấy chúng ta có form đăng ký đẹp mắt này để tạo người dùng mới.

37:26

So if I go ahead and try executing this with a dummy user.

Vì vậy, nếu tôi thử thực thi điều này với một người dùng giả.

37:31

So now you can see my account has been created and we're now back on the home screen after the redirect which is excellent.

Vì vậy, bây giờ bạn có thể thấy tài khoản của tôi đã được tạo và chúng ta đã quay lại màn hình chính sau khi chuyển hướng, điều này thật tuyệt vời.

37:38

This means we now have successfully created the account inside of the database and we're fully authenticated.

Điều này có nghĩa là chúng ta đã tạo thành công tài khoản trong cơ sở dữ liệu và chúng ta đã được xác thực hoàn toàn.

37:44

Next up,

Tiếp theo,

37:45

let's make sure we add a login screen as well, so users can enter their credentials if they already have an account.

hãy đảm bảo chúng ta thêm màn hình đăng nhập nữa, để người dùng có thể nhập thông tin đăng nhập nếu họ đã có tài khoản.

37:52

So for this, I've gone back to the login page, the route, and I've pasted in some JSX.

Vì vậy, tôi đã quay lại trang đăng nhập, route, và dán vào một số JSX.

37:57

This is very similar for signup.

Cái này rất giống với signup.

37:59

Now on login we maintain the email and password form state, set up the onSubmit handler where now we use the signIn object from the

Bây giờ ở phần đăng nhập, chúng ta duy trì trạng thái biểu mẫu email và mật khẩu, thiết lập trình xử lý onSubmit, nơi chúng ta sử dụng đối tượng signIn từ

38:08

Better Auth client and called email provided to email and password from the input, and finally here we're just rendering another HTML form with the ability to pass in the email and password and a button that passes in the submit handler.

máy khách Better Auth và gọi email được cung cấp đến email và mật khẩu từ đầu vào, và cuối cùng ở đây chúng ta chỉ đang hiển thị một biểu mẫu HTML khác với khả năng nhập email và mật khẩu cùng một nút gọi trình xử lý submit.

38:22

And this is just as the same as the signup form.

Và điều này cũng giống như biểu mẫu đăng ký.

38:26

We're using Tailwind styling here.

Chúng ta đang sử dụng kiểu dáng Tailwind ở đây.

38:27

And so now with this in place, we should see in the

Và bây giờ với điều này, chúng ta sẽ thấy trên

38:32

màn hình đăng nhập biểu mẫu đăng nhập đẹp này.

38:34

And if we provide the same credentials as the account that we just created, we got authenticated and sent back to the dashboard, which is excellent.

Và nếu chúng ta cung cấp cùng thông tin đăng nhập như tài khoản vừa tạo, chúng ta sẽ được xác thực và được đưa trở lại bảng điều khiển, điều này thật tuyệt vời.

38:44

Otherwise, we have some basic error handling here, which looks very nice.

Nếu không, chúng ta có một số xử lý lỗi cơ bản ở đây, trông rất đẹp.

38:48

So now we have the ability to sign up and log in and obtain our actual authentication.

Vậy bây giờ chúng ta có khả năng đăng ký và đăng nhập để có được xác thực thực sự.

38:55

And we can see this if we're logged in actually on the application tab.

Và chúng ta có thể thấy điều này nếu chúng ta đã đăng nhập thực sự trên tab ứng dụng.

39:00

If you see the cookies for this, you can see we have this better-auth.session token which is essentially containing the JWT that we

Nếu bạn xem cookie cho trang này, bạn có thể thấy chúng ta có mã thông báo better-auth.session này, về cơ bản chứa JWT mà chúng ta

39:10

send now to the server for every request which is what's providing our authentication and making this work end to end.

gửi đến máy chủ cho mỗi yêu cầu, đó là thứ cung cấp xác thực của chúng ta và làm cho điều này hoạt động từ đầu đến cuối.

39:17

So now for every HTTP request we make to the server we'll be including this token for authentication.

Vậy bây giờ, đối với mỗi yêu cầu HTTP chúng ta gửi đến máy chủ, chúng ta sẽ bao gồm mã thông báo này để xác thực.

39:24

So finally, now that we have the way to log in and sign up, let's show you how we can protect all other routes with authentication.

Cuối cùng, bây giờ chúng ta đã có cách đăng nhập và đăng ký, hãy để tôi chỉ cho bạn cách chúng ta có thể bảo vệ tất cả các tuyến đường khác bằng xác thực.

39:32

So that for example, we can only access the dashboard and other routes if we're authenticated.

Ví dụ, chúng ta chỉ có thể truy cập bảng điều khiển và các tuyến đường khác nếu chúng ta đã được xác thực.

39:38

Otherwise, we send the user back to the login screen.

Nếu không, chúng ta sẽ đưa người dùng trở lại màn hình đăng nhập.

39:42

Let's see how we can do this next.

Hãy xem cách chúng ta có thể làm điều này tiếp theo.

39:45

So in order to actually update our application to protect our routes that we want to have authentication in order to access, we're going to go ahead and in the web folder source/routes.

Để thực sự cập nhật ứng dụng của chúng ta nhằm bảo vệ các tuyến đường mà chúng ta muốn yêu cầu xác thực để truy cập, chúng ta sẽ vào thư mục web/source/routes.

40:00

Just like we have this special __root file which displays all content through the outlet

Giống như chúng ta có tệp __root đặc biệt này hiển thị tất cả nội dung thông qua outlet

40:07

in Tanstack router, we can create essentially equivalent to layout files.

trong bộ định tuyến Tanstack, chúng ta có thể tạo các tệp tương đương với các tệp bố cục.

40:11

If you've used Next.js App Router before where if we have _route name for example _authenticated.tsx.

Nếu bạn đã sử dụng Next.js App Router trước đây, nếu chúng ta có _route name ví dụ _authenticated.tsx.

40:17

This will allow us to define a special route that isn't actually rendered as part of the page itself, but is essentially a layout where just like in the root, we can add any global JSX or checks that we want.

Điều này sẽ cho phép chúng ta định nghĩa một tuyến đường đặc biệt không thực sự được hiển thị như một phần của trang, nhưng về cơ bản là một bố cục, giống như trong root, chúng ta có thể thêm bất kỳ JSX toàn cục hoặc kiểm tra nào chúng ta muốn.

40:35

And then any children that live inside of this authenticated route

Và sau đó bất kỳ thành phần con nào nằm bên trong tuyến đường được xác thực này

40:40

will always of course execute this root component.

sẽ luôn thực thi thành phần gốc này.

40:43

And so this is a great place to do an authentication check.

Và đây là một nơi tuyệt vời để thực hiện kiểm tra xác thực.

40:48

And the way this works is now if we have an authenticated directory here, since this matches the authenticated layout name, any files that we create in here, any paths that we set up, well, when we navigate to those, we will automatically be applying the authenticated layout.

Và cách thức hoạt động là bây giờ nếu chúng ta có một thư mục authenticated ở đây, vì nó khớp với tên bố cục được xác thực, bất kỳ tệp nào chúng ta tạo trong đó, bất kỳ đường dẫn nào chúng ta thiết lập, khi chúng ta điều hướng đến chúng, chúng ta sẽ tự động áp dụng bố cục được xác thực.

41:09

And so this is going to be a great spot now to do our authentication and make sure this folder has the underscore authenticated to match the layout and it will ensure that this layout is associated with the paths or routes inside of this authenticated directory.

Và đây sẽ là một vị trí tuyệt vời để thực hiện xác thực của chúng ta và đảm bảo thư mục này có dấu gạch dưới authenticated để khớp với bố cục và nó sẽ đảm bảo rằng bố cục này được liên kết với các đường dẫn hoặc tuyến đường bên trong thư mục authenticated này.

41:26

And so now what we'll do in _authenticated is go ahead and see we have our createFileRoute already set up for this layout path.

Và bây giờ những gì chúng ta sẽ làm trong _authenticated là tiếp tục và thấy chúng ta đã có createFileRoute được thiết lập cho đường dẫn bố cục này.

41:35

And what we can do inside is as well as defining the component that we're rendering, we can actually have a beforeLoad function that Tanstack router provides that allows you to execute code before the component actually renders.

Và những gì chúng ta có thể làm bên trong, cũng như định nghĩa thành phần mà chúng ta đang hiển thị, chúng ta thực sự có thể có một hàm beforeLoad mà bộ định tuyến Tanstack cung cấp cho phép bạn thực thi mã trước khi thành phần thực sự hiển thị.

41:49

So this can

Vì vậy, điều này có thể

41:51

be an async callback function where we can destructure the current location that we're on.

là một hàm callback bất đồng bộ, nơi chúng ta có thể hủy cấu trúc vị trí hiện tại mà chúng ta đang ở.

41:56

And now in this callback function, I want to get access to the current session that the user has.

Và bây giờ trong hàm callback này, tôi muốn lấy quyền truy cập vào phiên hiện tại của người dùng.

42:03

And we want to do this programmatically not through a hook.

Và chúng ta muốn làm điều này theo cách lập trình, không phải thông qua một hook.

42:07

So for this we can use the getSession function that we've exposed from our Auth client.

Vì vậy, chúng ta có thể sử dụng hàm getSession mà chúng ta đã xuất từ máy khách Auth của mình.

42:12

So remember we have useSession for the hook variant.

Hãy nhớ rằng chúng ta có useSession cho biến thể hook.

42:16

And so this is going to be the async programmatic variant where we fetch the session with async/await.

Và vì vậy đây sẽ là biến thể lập trình bất đồng bộ, nơi chúng ta tìm nạp phiên với async/await.

42:21

And then it will call our server to check to see if we have a valid session.

Và sau đó nó sẽ gọi máy chủ của chúng ta để kiểm tra xem chúng ta có phiên hợp lệ hay không.

42:27

And so at this point we know if we're authenticated.

Và tại thời điểm này, chúng ta biết liệu chúng ta đã được xác thực hay chưa.

42:30

If we don't have any data that is returned back from that call, that means we don't have a session.

Nếu chúng ta không có bất kỳ dữ liệu nào được trả về từ cuộc gọi đó, điều đó có nghĩa là chúng ta không có phiên.

42:37

So we want to redirect the user back to the login screen.

Vì vậy, chúng ta muốn chuyển hướng người dùng trở lại màn hình đăng nhập.

42:41

To do this, we throw a redirect call back function where we can specify to where you want to redirect the user.

Để làm điều này, chúng ta ném một hàm callback redirect, nơi chúng ta có thể chỉ định nơi bạn muốn chuyển hướng người dùng.

42:49

And again, since this is Tanstack router completely type safe, we can see the actual routes we have available to us.

Và một lần nữa, vì bộ định tuyến Tanstack hoàn toàn an toàn về kiểu, chúng ta có thể thấy các tuyến đường thực tế có sẵn cho chúng ta.

42:57

Very cool.

Rất tuyệt.

42:58

Otherwise, we can set search and set redirect to location.href if for example you wanted to include the route that the user was trying to go to in here for a redirect.

Nếu không, chúng ta có thể đặt search và set redirect thành location.href nếu ví dụ bạn muốn bao gồm tuyến đường mà người dùng đang cố gắng truy cập vào đây để chuyển hướng.

43:13

And then finally, we're going to go ahead and return back an object where we have the session set to the current data.

Và cuối cùng, chúng ta sẽ tiếp tục và trả về một đối tượng, nơi chúng ta có phiên được đặt thành dữ liệu hiện tại.

43:21

So what this means is whatever we return from beforeLoad is actually going to be part of the route context and now children of this authenticated component will be able to get access to this session object through the route context and we'll see how to do this next.

Vì vậy, điều này có nghĩa là bất cứ thứ gì chúng ta trả về từ beforeLoad thực sự sẽ là một phần của ngữ cảnh tuyến đường và bây giờ các thành phần con của thành phần được xác thực này sẽ có thể truy cập đối tượng phiên này thông qua ngữ cảnh tuyến đường và chúng ta sẽ thấy cách thực hiện điều này tiếp theo.

43:40

Finally, in the route component JSX, make sure that we update this because here instead of having some generic JSX, we want to render the outlet component from React Router Tanstack.

Cuối cùng, trong JSX của thành phần tuyến đường, hãy đảm bảo rằng chúng ta cập nhật điều này bởi vì ở đây thay vì có một số JSX chung chung, chúng ta muốn hiển thị thành phần outlet từ React Router Tanstack.

43:52

And what this is going to do is it's automatically going to render any components inside of the authenticated directory that matches the route we're on.

Và điều này sẽ tự động hiển thị bất kỳ thành phần nào bên trong thư mục authenticated khớp với tuyến đường chúng ta đang ở.

44:02

And so what does this look like?

Và điều này trông như thế nào?

44:05

Well, now if we create a file inside of authenticated and call this dashboard.tsx a new dashboard component, it's already inside of the authenticated layout.

Chà, bây giờ nếu chúng ta tạo một tệp bên trong authenticated và gọi nó là dashboard.tsx, một thành phần bảng điều khiển mới, nó đã nằm trong bố cục được xác thực.

44:15

And now if we get access to the session, what we can do is use the route that we create up here from createFileRoute.

Và bây giờ nếu chúng ta có quyền truy cập vào session, những gì chúng ta có thể làm là sử dụng route mà chúng ta đã tạo ở trên từ createFileRoute.

44:26

This will have a useRouteContext hook that will automatically return us the current route context that

Route này sẽ có một hook useRouteContext tự động trả về route context hiện tại mà

44:33

we populated inside of our authenticated layout.

chúng ta đã điền vào trong authenticated layout của mình.

44:39

And the coolest part about this is this is totally type-safe because we have our Tanstack router types running in the background in our development server.

Và phần tuyệt vời nhất về điều này là nó hoàn toàn type-safe vì chúng ta có các kiểu Tanstack router chạy ngầm trong máy chủ phát triển.

44:50

We updated our route tree gen file.

Chúng ta đã cập nhật tệp route tree gen.

44:52

And so this session inside of the route context is fully type safe here, which is incredible.

Và vì vậy session này bên trong route context hoàn toàn type-safe ở đây, điều này thật đáng kinh ngạc.

45:00

And so now I've just added some JSX here with Tailwind styling to essentially output the current user session into a nice format here.

Và bây giờ tôi vừa thêm một số JSX với kiểu dáng Tailwind để xuất session người dùng hiện tại thành một định dạng đẹp ở đây.

45:07

So I'm JSON stringifying it just so we can actually read it out.

Vì vậy tôi đang JSON stringify nó chỉ để chúng ta có thể đọc được.

45:12

So I'm reading the session user object which contains the Better Auth user that's saved in the database.

Vì vậy tôi đang đọc đối tượng session user chứa người dùng Better Auth được lưu trong cơ sở dữ liệu.

45:18

And then we stringify the entire session so we can see it.

Và sau đó chúng ta stringify toàn bộ session để có thể thấy nó.

45:22

The other thing that I've done is I've updated our root component to have some header navigation.

Một điều khác tôi đã làm là cập nhật root component của chúng ta để có một số header navigation.

45:28

And in here, we're also now getting access to the current session using the React useSession hook.

Và ở đây, chúng ta cũng đang lấy quyền truy cập vào session hiện tại bằng cách sử dụng hook React useSession.

45:33

So, this is how we can get access to sessions inside of components with the useSession hook that comes from our Auth client that we set up.

Vì vậy, đây là cách chúng ta có thể lấy quyền truy cập vào các session bên trong các component với hook useSession đến từ Auth client mà chúng ta đã thiết lập.

45:42

And if we do have a session already available, because notice this root layout is not an authenticated component.

Và nếu chúng ta đã có sẵn một session, vì lưu ý rằng root layout này không phải là một authenticated component.

45:49

This could render both if

Nó có thể hiển thị cả khi

45:51

we're logged in or logged out.

chúng ta đã đăng nhập hoặc đăng xuất.

45:52

And so we need to determine if we do have a session to determine what header, for example, we're showing because if the user does have a session, we want to show them their email and a sign out button.

Và vì vậy chúng ta cần xác định xem chúng ta có session hay không để quyết định header nào, ví dụ, chúng ta sẽ hiển thị bởi vì nếu người dùng có session, chúng ta muốn hiển thị email của họ và một nút đăng xuất.

46:05

Otherwise, we want to render the login and signup links.

Nếu không, chúng ta muốn hiển thị các liên kết đăng nhập và đăng ký.

46:08

And so we can do that with the useSession hook.

Và vì vậy chúng ta có thể làm điều đó với hook useSession.

46:11

This will get us access to the current

Hook này sẽ cung cấp cho chúng ta quyền truy cập vào session

46:14

session that we have if the user is logged in.

hiện tại mà chúng ta có nếu người dùng đã đăng nhập.

46:17

Otherwise, it will just be empty.

Nếu không, nó sẽ chỉ trống rỗng.

46:19

And so now we can check to see in any component if we're logged in, get access to the current user and use that in this case to render the correct navigation.

Và vì vậy bây giờ chúng ta có thể kiểm tra trong bất kỳ component nào xem chúng ta đã đăng nhập chưa, lấy quyền truy cập vào người dùng hiện tại và sử dụng nó trong trường hợp này để hiển thị điều hướng chính xác.

46:30

And notice we're still rendering the outlet to make sure we have the components rendered.

Và lưu ý rằng chúng ta vẫn đang hiển thị outlet để đảm bảo các component được hiển thị.

46:36

So now back in our application, you can see that we are rendering out the homepage root layout component.

Vì vậy bây giờ quay lại ứng dụng của chúng ta, bạn có thể thấy rằng chúng ta đang hiển thị component root layout của trang chủ.

46:42

And notice in the header component, since I'm logged in and I actually have an active session, we're rendering out the user's email here.

Và lưu ý trong component header, vì tôi đã đăng nhập và thực sự có một session hoạt động, chúng ta đang hiển thị email của người dùng ở đây.

46:50

And we can click on the dashboard link to now programmatically navigate to the dashboard and see the Better Auth session

Và chúng ta có thể nhấp vào liên kết dashboard để điều hướng theo chương trình đến dashboard và xem session Better Auth

46:58

object, which is the same object that's stored in the database.

object, đó là cùng một object được lưu trong cơ sở dữ liệu.

47:02

Same with the user here and see all the user details.

Tương tự với user ở đây và xem tất cả chi tiết người dùng.

47:06

So this is showing us everything we have access to on the React side here which is awesome.

Vì vậy, điều này cho chúng ta thấy mọi thứ chúng ta có quyền truy cập ở phía React, thật tuyệt vời.

47:12

We can also sign out and now you can see if I refresh and try to then access that dashboard page.

Chúng ta cũng có thể đăng xuất và bây giờ bạn có thể thấy nếu tôi làm mới và cố gắng truy cập trang dashboard đó.

47:19

Notice how it immediately redirected me back to the login.

Lưu ý rằng nó ngay lập tức chuyển hướng tôi trở lại trang đăng nhập.

47:22

And this is because our layout component is working as expected.

Và điều này là do layout component của chúng ta hoạt động như mong đợi.

47:26

We try going to dashboard, beforeLoad runs.

Chúng ta thử đi đến dashboard, beforeLoad chạy.

47:29

Notice we don't have a session and redirects us back to login here.

Lưu ý rằng chúng ta không có session và chuyển hướng chúng ta trở lại trang đăng nhập ở đây.

47:33

So this is protecting us from our authenticated page.

Vì vậy, điều này bảo vệ chúng ta khỏi trang authenticated của chúng ta.

47:37

We can't access these authenticated routes here because we don't have a session.

Chúng ta không thể truy cập các route authenticated này vì chúng ta không có session.

47:42

Not until I actually fill out the email and password here with the user's details.

Cho đến khi tôi thực sự điền email và mật khẩu ở đây với thông tin chi tiết của người dùng.

47:47

I'm navigated back to the root.

Tôi được điều hướng trở lại root.

47:50

And now we can see we're authenticated and I can

Và bây giờ chúng ta có thể thấy chúng ta đã được xác thực và tôi có thể

47:54

access the inner authenticated pages.

truy cập các trang authenticated bên trong.

47:55

So this is awesome.

Vì vậy, điều này thật tuyệt vời.

47:57

We've fully seen how we can integrate Better Auth from our NestJS backend into a React UI with Tanstack router.

Chúng ta đã thấy đầy đủ cách tích hợp Better Auth từ backend NestJS của chúng ta vào giao diện React với Tanstack router.

48:03

This is a very excellent solution type safe beginning to end and integrates so well thanks to this Better Auth React client which is really what makes this so easy giving us access to all of these pre-built hooks and

Đây là một giải pháp rất xuất sắc, type-safe từ đầu đến cuối và tích hợp rất tốt nhờ vào Better Auth React client, điều thực sự làm cho việc này trở nên dễ dàng, cung cấp cho chúng ta quyền truy cập vào tất cả các hook và

48:17

functions.

hàm được xây dựng sẵn.

48:17

All we have to do is point it at the Better Auth server which we've set up in the NestJS backend.

Tất cả những gì chúng ta cần làm là trỏ nó đến máy chủ Better Auth mà chúng ta đã thiết lập trong backend NestJS.

48:23

So, thank you so much for watching this lecture.

Vì vậy, cảm ơn bạn rất nhiều vì đã xem bài giảng này.

48:25

I hope you've learned so much and I'll see you in the next.

Tôi hy vọng bạn đã học được rất nhiều và tôi sẽ gặp bạn trong bài tiếp theo.

Transcript

Hiển thị

Monorepo Setup and Backend Foundation

The video begins by setting up a Turbo repo monorepo with a NestJS backend and Bun as the package manager. The focus is on installing dependencies for Better Auth, Drizzle ORM, and Postgres. The backend is bootstrapped with NestJS, and the database connection is configured using environment variables. Docker Compose is used to run a Postgres container locally. Better Auth is configured with Drizzle adapter, email/password authentication, and trusted origins.

Video bắt đầu bằng việc thiết lập monorepo Turbo repo với backend NestJS và Bun làm trình quản lý gói. Trọng tâm là cài đặt các phụ thuộc cho Better Auth, Drizzle ORM và Postgres. Backend được khởi tạo với NestJS, và kết nối cơ sở dữ liệu được cấu hình bằng biến môi trường. Docker Compose được sử dụng để chạy container Postgres cục bộ. Better Auth được cấu hình với adapter Drizzle, xác thực email/mật khẩu và các nguồn đáng tin cậy.