I am developing angular2-nodejs-mongodb single page application.and using auth0 security.
I got access_token from angular2 project. But it's not jwt_token. Main problem is node.js project want jwt_token like Authorization : Bearer My_Token. Attached image below.
Angular image :getting access_token
postman:send requires to auth0 for jwt_token
postman : try to access my nodejs aaplication
Actually I did't get idea, how to convert angular access token to node.js jwt_tocken
Let's just say I found this solution on internet
Actually copied some code from private repo)
const createClient = () => createAuth0Client({
domain: AUTH0_DOMAIN,
client_id: AUTH0_ID,
redirect_uri: window.location.origin,
});
...
export class AuthService {
constructor(
public sessionService: SessionService,
public alertService: AlertService,
public userService: UserService,
) {
makeObservable(this, {
sessionService: observable,
alertService: observable,
userService: observable,
authPopup: action.bound,
authRedirect: action.bound,
_handleNewToken: action.bound,
init: action.bound,
});
this.init();
}
async _handleNewToken(auth0: Auth0Client) {
const {
_raw: jwt,
nickname,
picture,
email,
} = await auth0.getIdTokenClaims();
nickname && this.userService.setNickname(nickname);
picture && this.userService.setPicture(picture);
email && this.userService.setEmail(email);
this.sessionService.setSessionId(jwt);
// ^^^
}
async authPopup() {
let token: string | false = false;
try {
const auth0 = await createClient();
await auth0.loginWithPopup();
await this._handleNewToken(auth0);
this.alertService.push('Signed in successfully');
} catch (e) {
console.log(e);
this.alertService.push('Authorization failed');
} finally {
return token;
}
}
async authRedirect() {
try {
const auth0 = await createClient();
await auth0.loginWithRedirect();
await sleep(5_000);
} catch(e) {
console.log(e);
this.alertService.push('Authorization failed');
}
}
async init() {
try {
const auth0 = await createClient();
await auth0.handleRedirectCallback();
await this._handleNewToken(auth0);
this.alertService.push('Signed in successfully');
} catch (e) {
console.log(e);
}
}
};
...
const handleButtonClick = () => {
await authService.authRedirect();
...
};
Related
I have login service and login controller.
Service:
class LoginService {
private tokenService: TokenService;
constructor() {
this.tokenService = new TokenService();
this.login = this.login.bind(this);
this.getClient = this.getClient.bind(this);
this.getUserProfile = this.getUserProfile.bind(this);
}
public async login(req: Request, res: Response) {
try {
const { password } = req.body;
const client = await this.getClient(req, res);
const userProfile = await this.getUserProfile(client);
if (!comparePassword(password, userProfile.password))
return res.status(StatusCodes.UNAUTHORIZED).json({ error: 'Incorrect password' });
const tokens = this.tokenService.generateTokens(client);
this.tokenService.setToken(res, tokens);
return res.status(StatusCodes.OK).json(tokens);
} catch (error) {
return res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({ msg: error.message });
}
}
}
Controller:
class LoginController {
private loginService: LoginService;
constructor(private router: IRouter) {
this.router = router;
this.loginService = new LoginService();
this.routes();
}
public routes() {
this.router.route('/auth').post(loginMiddleware, this.loginService.login);
}
}
So, my question is, how to move responses logic to controller correctly, cuz i'm just started to learn nestjs.
So I'm creating authentication logic in my Next.js app. I created /api/auth/login page where I handle request and if user's data is good, I'm creating a httpOnly cookie with JWT token and returning some data to frontend. That part works fine but I need some way to protect some pages so only the logged users can access them and I have problem with creating a HOC for that.
The best way I saw is to use getInitialProps but on Next.js site it says that I shouldn't use it anymore, so I thought about using getServerSideProps but that doesn't work either or I'm probably doing something wrong.
This is my HOC code:
(cookie are stored under userToken name)
import React from 'react';
const jwt = require('jsonwebtoken');
const RequireAuthentication = (WrappedComponent) => {
return WrappedComponent;
};
export async function getServerSideProps({req,res}) {
const token = req.cookies.userToken || null;
// no token so i take user to login page
if (!token) {
res.statusCode = 302;
res.setHeader('Location', '/admin/login')
return {props: {}}
} else {
// we have token so i return nothing without changing location
return;
}
}
export default RequireAuthentication;
If you have any other ideas how to handle auth in Next.js with cookies I would be grateful for help because I'm new to the server side rendering react/auth.
You should separate and extract your authentication logic from getServerSideProps into a re-usable higher-order function.
For instance, you could have the following function that would accept another function (your getServerSideProps), and would redirect to your login page if the userToken isn't set.
export function requireAuthentication(gssp) {
return async (context) => {
const { req, res } = context;
const token = req.cookies.userToken;
if (!token) {
// Redirect to login page
return {
redirect: {
destination: '/admin/login',
statusCode: 302
}
};
}
return await gssp(context); // Continue on to call `getServerSideProps` logic
}
}
You would then use it in your page by wrapping the getServerSideProps function.
// pages/index.js (or some other page)
export const getServerSideProps = requireAuthentication(context => {
// Your normal `getServerSideProps` code here
})
Based on Julio's answer, I made it work for iron-session:
import { GetServerSidePropsContext } from 'next'
import { withSessionSsr } from '#/utils/index'
export const withAuth = (gssp: any) => {
return async (context: GetServerSidePropsContext) => {
const { req } = context
const user = req.session.user
if (!user) {
return {
redirect: {
destination: '/',
statusCode: 302,
},
}
}
return await gssp(context)
}
}
export const withAuthSsr = (handler: any) => withSessionSsr(withAuth(handler))
And then I use it like:
export const getServerSideProps = withAuthSsr((context: GetServerSidePropsContext) => {
return {
props: {},
}
})
My withSessionSsr function looks like:
import { GetServerSidePropsContext, GetServerSidePropsResult, NextApiHandler } from 'next'
import { withIronSessionApiRoute, withIronSessionSsr } from 'iron-session/next'
import { IronSessionOptions } from 'iron-session'
const IRON_OPTIONS: IronSessionOptions = {
cookieName: process.env.IRON_COOKIE_NAME,
password: process.env.IRON_PASSWORD,
ttl: 60 * 2,
}
function withSessionRoute(handler: NextApiHandler) {
return withIronSessionApiRoute(handler, IRON_OPTIONS)
}
// Theses types are compatible with InferGetStaticPropsType https://nextjs.org/docs/basic-features/data-fetching#typescript-use-getstaticprops
function withSessionSsr<P extends { [key: string]: unknown } = { [key: string]: unknown }>(
handler: (
context: GetServerSidePropsContext
) => GetServerSidePropsResult<P> | Promise<GetServerSidePropsResult<P>>
) {
return withIronSessionSsr(handler, IRON_OPTIONS)
}
export { withSessionRoute, withSessionSsr }
I just started using nestjs for a project. I have successfully logged in users and token returned. Now using the token to authorize users is the problem. Trying to get all users has been returning "unauthorized access"
I am also thinking I didn't put the token correctly or so. In the swagger authorization UI, I supplied
Bearer someTokenGoesHere into the input box
Image below
This is my code
main.ts
Swagger configuration in main.ts
const options = new DocumentBuilder().addBearerAuth()
.setTitle('My app')
.setDescription('My app API description')
.setVersion('1.0')
.addTag('Tags')
.build();
const document = SwaggerModule.createDocument(app, options);
SwaggerModule.setup('', app, document);
User controller
import { Controller, Post, Body, Get, Param, UseGuards } from '#nestjs/common';
import { UserService } from './user.service';
import { CreateUserDto } from './create-user.dto';
import { LoginUserDto } from './login-user.dto';
import { AuthService } from 'src/auth/auth.service';
import { AuthGuard } from '#nestjs/passport';
import { AdminGuard } from 'src/guards/admin.guard';
import { ApiBearerAuth, ApiBasicAuth } from '#nestjs/swagger';
#Controller('user')
export class UserController {
constructor(private userService: UserService,
private authService: AuthService) { }
#Post('login')
async login(#Body() loginDTO: LoginUserDto) {
const user = await this.userService.login(loginDTO);
const newob = {
id: user._id
}
const payload = {
userId: user._id,
email: user.Email,
}
const token = await this.authService.signPayLoad(payload);
return { newob, token };
}
#Post('register')
async register(#Body() createDTO: CreateUserDto) {
const user = await this.userService.register(createDTO);
const newob = {
id: user._id
}
const payload = {
firstname: user.FirstName,
lastname: user.LastName
};
const token = await this.authService.signPayLoad(payload);
return newob;
}
#Get('all')
#ApiBearerAuth()
#UseGuards(AuthGuard('jwt'))
async getAllUsers() {
return await this.userService.getAllUsers();
}
#Post('confirm/:token')
async confirmEmail(#Param() token: string) {
const user = await this.userService.ConfirmEmail(token);
return user;
}
}
Can someone please help me out
Thanks
I was able to fix it, I appreciate your suggestions. I was extracting email that wasn't present in the payload. so I decided to log it and discovered it was null. Then I logout payload, I discovered I was passing User Id into the payload. So I change to id.
The result is
async findByPayLoad(payload: any) {
const { userId } = payload;
return await this.userModel.findById(userId)
}
I'm trying to implement a passport strategy (passport-headerapikey), I was able to make it work and I can secure my routes.
But the request is empty and cannot access the logged in user ?
import { HeaderAPIKeyStrategy } from "passport-headerapikey";
import { PassportStrategy } from "#nestjs/passport";
import { Injectable, NotFoundException } from "#nestjs/common";
import { CompanyService } from "../../companies/companies.service";
#Injectable()
export class ApiKeyStrategy extends PassportStrategy(HeaderAPIKeyStrategy, "api-key") {
constructor(private readonly companyService: CompanyService) {
super(
{
header: "Authorization",
prefix: "Api-Key "
},
true,
async (apiKey, done) => {
return this.validate(apiKey, done);
}
);
}
public async validate(apiKey: string, done: (error: Error, data) => {}) {
const company = await this.companyService.findByApiKey(apiKey);
if (company === null) {
throw new NotFoundException("Company not found");
}
return company;
}
}
#UseGuards(AuthGuard("api-key"))
export class CompaniesController {
constructor(private companyService: CompanyService) {}
#Get()
#ApiOperation({ title: "Get company information" })
public getCompany(#Request() req) {
// here request is empty, so i cannot access the user..
console.log("request", req);
return [];
}
}
Thanks for your help !
To access the logged user, you can inject the object in the request. To do that, in your ApiKeyStrategy constructor, change the third parameter to something like this:
async (apiKey, verified, req) => {
const user = await this.findUser(apiKey);
// inject the user in the request
req.user = user || null;
return verified(null, user || false);
}
Now, you can access the logged user:
getCompany(#Request() req) {
console.log(req.user);
}
I hope that could help you.
As show in the documentation you should do some works to get the current user : here the documetation
First of all in the app.module make sure that the context is set :
context: ({ req }) => ({ req })
Then you can add this in the controller/resolver, this example use the Gql (GraphQL):
export const CurrentUser = createParamDecorator(
(data: unknown, context: ExecutionContext) => {
const ctx = GqlExecutionContext.create(context);
return ctx.getContext().req.user;
},
);
if this one doesnt work for you try this one instead :
export const CurrentUser = createParamDecorator(
(data: unknown, context: ExecutionContext) => {
const ctx = GqlExecutionContext.create(context);
const request = ctx.getContext();
request.body = ctx.getArgs();
return request.user;
},
);
Modify your validate method like so:
public async validate(apiKey: string, done: (error: Error, data) => {}) {
const company = await this.companyService.findByApiKey(apiKey);
if (company === null) {
return done(new NotFoundException("Company not found"), null);
}
return done(null, company);
}
I'm a bit of a beginner with Angular so please bear with me.
I have a simple app which allows people to register, login and retrieve their own user data (which is the part I am stuck at).
Backend user.routes.js :
const auth = require('./middlewares/auth')
module.exports = (app) => {
const user = require('./user.controller.js');
app.post('/login', user.login);
app.post('/register', user.register);
app.get('/getuser', auth, user.getuser);
}
Backend user.controller.js:
exports.getuser = async (req, res, next) => {
let user
try {
user = await User.findById(req.payload._id)
} catch (err) {
next(new InternalServerError('Could not fetch user', err))
return
}
if (!user) {
next(new NotFoundError('User not found'))
return
}
res.json(
pick(user, [
'email',
'firstName',
'lastName',
'accountType'
])
)
}
Backend user.service.ts :
#Injectable()
export class UserService {
private _isLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject(false);
public readonly isLoggedIn$ = this._isLoggedIn.asObservable();
constructor(private http: HttpClient) {
this._isLoggedIn.next(this.isLoggedIn());
}
login(
email: string,
password: string,
rememberMe = false
): Observable<boolean | any> {
return this.http
.post<LoginResponse>('http://localhost:3001/login', { email, password })
.map(res => {
setToken(res.token, rememberMe);
this._isLoggedIn.next(true);
return true;
})
.catch(this.handleError);
}
register(
email: string,
password: string,
lastName: string,
firstName: string
): Observable<boolean | any> {
return this.http
.post<LoginResponse>('http://localhost:3001/register', {
email,
password,
lastName,
firstName
})
.map(res => {
setToken(res.token);
return true;
})
.catch(this.handleError);
}
logout() {
removeToken();
}
isLoggedIn() {
return tokenNotExpired();
}
getProfile() {
return this.http.get<Profile>('http://localhost:3001/getuser');
}
And finally, my backend auth.js :
// Dependencies
import { JwtHelperService } from '#auth0/angular-jwt';
// Angular
import {
HttpEvent,
HttpHandler,
HttpInterceptor,
HttpRequest
} from '#angular/common/http';
import { Injectable } from '#angular/core';
// RXJS
import { Observable } from 'rxjs/Observable';
// Environment
import { DecodedToken } from './decoded-token';
// Services
const helper = new JwtHelperService();
// Constants
export const TOKEN_NAME = 'access_token';
// Exports
export function getToken(storage = null) {
if (storage) {
const token = storage.getItem(TOKEN_NAME);
if (token && !helper.isTokenExpired(token)) {
return token;
}
removeToken(storage);
return null;
}
return getToken(localStorage) || getToken(sessionStorage);
}
export function setToken(token: string, rememberMe = false) {
const storage = rememberMe ? localStorage : sessionStorage;
storage.setItem(TOKEN_NAME, token);
}
export function removeToken(storage = null) {
if (storage) {
storage.removeItem(TOKEN_NAME);
} else {
localStorage.removeItem(TOKEN_NAME);
sessionStorage.removeItem(TOKEN_NAME);
}
}
export function tokenNotExpired() {
return !helper.isTokenExpired(getToken());
}
export function decodeToken(): DecodedToken {
return helper.decodeToken(getToken());
}
#Injectable()
export class JwtHttpInterceptor implements HttpInterceptor {
constructor() {}
intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
const token = getToken();
let clone: HttpRequest<any>;
if (token) {
clone = request.clone({
setHeaders: {
Accept: `application/json`,
'Content-Type': `application/json`,
Authorization: `Bearer ${token}`
}
});
} else {
clone = request.clone({
setHeaders: {
Accept: `application/json`,
'Content-Type': `application/json`
}
});
}
return next.handle(clone);
}
}
On my dashboard, I do a very simple request:
this.userService.getProfile().subscribe(data => (this.profile = data));
Now, my problem is the following:
Using Postman, if I do a POST request to /login, I get a token back. Everything fine so far. And if I use this token (in Postman) in my next GET request to /getuser, I also get the results I want (email, firstName, lastName, accountType of the user).
However, the problem is on the front-end. I login and arrive to the main page (no issues there), but once getProfile() is called, I get a GET http://localhost:3001/getuser 401 (Unauthorized) . I've been stuck on this for hours and not sure where the problem is from.
I appreciate any help I can get.
Thanks!
I found my issue. I had forgotten to add the Interceptor I had created to my providers in app.module.ts.
// Auth
{
provide: HTTP_INTERCEPTORS,
useClass: JwtHttpInterceptor,
multi: true
}