Authentication with Yandex oAuth in NestJs
Third-party authentication has become so widespread and it already looks like an ordinary thing that must be implemented in each new project. But if you never have implemented oAuth integration like this you probably could meet some misunderstanding at the start and lose some time.
In this article, we will consider how to implement Yandex OAuth in NestJs application. There will be used web application as an example, httpOnly cookies as transport for jwt token. And also will consider how to integrate other oAuth vendors into our user auth system.
Let’s move on!
Firstly, consider a whole process of authentication. When user clicks to sign up via Yandex on a web page, frontend application send a request to NestJs API. Then NestJs should redirect to Yandex login form. After successful login, Yandex will redirect to NestJs API where we can save user information and then set cookies and redirect to frontend app. So that’s all process.
Probably you already have installed NestJs app and staying in the process to implement authentication. First, that needs to do its register Yandex OAuth application to get ClientID and Secret password, and set Callback URLs for that Yandex will redirect after authentication. So it’s common usual process that is similar in all OAuth vendors, cause we will skip description of it. Just look what we need to have to start the next step:
Define auth strategies
Need to define a basic JWT strategy to our application could use common JWT tokens after authentication by different vendors. NestJs has @nestjs/passport module for it. See the code of jwt.strategy.ts below:
In constructor, we defined how to get JWT token from request.
Validate method is used to validating data from JWT, in this case to make sure that we have a user with corresponding name.
And create strategy particularly for Yandex:
Also, constructor is used for configure strategy. Validate method will be invoked when Yandex will redirect to our application after successful authentication.
After that need to create endpoints for process signIn request from frontend.
Define endpoints
For auth endpoints let’s create auth.controller.ts.
In this file, everything should be clear to understand. Use @UseGuards(AuthGuard(‘yandex’)) to prohibiting access to endpoints with Yandex strategy.
/signin endpoint to get request for signup/signin to our application by Yandex.
/yandex/callback is endpoint on that Yandex will redirect after successful authentication and that should be defined in your Yandex registered application page.
Move on to implement authService.
Create service
There is code of auth service:
As result, after Yandex made successful authentication, signInWithYandex method will be invoked. In this method, we will create a user if he doesn’t exist in database. And in the signIn method generate our JWT token and redirect to frontend app URL with set cookies. After this browser will set cookies authomatically and will send it with each request for same domain.
SignIn flow with cookie
To guard endpoints in our application only for sign-in users we could use @UseGuards(AuthGuard()) (notice that jwtStrategy is used like default in your app module).
For example, if you forward to /profile endpoint from AuthController then NestJs automatically validate JWT token from cookies and invoke validate method.
Final auth module configuration
Don’t forget about correctly setup auth.module.ts after adding all files that were described above. And maybe also utility files could be interesting for you.
How to add other OAuth vendors
To add ability to signin to application by Google or Facebook, for instance, just need to implement files google.strategy.ts or facebook.strategy.ts. Add signIn endpoints and callbacks for each of them.
And that’s all. Good luck with your project creation!