I successfully implemented the back-end using nest-js to handle authentication with mongo-db. Registration and login are working fine, but I face an issue after logging in with a successful result - when I refresh the page, it redirects me back to the login route.
Here is the result of the cookie after successful login:
Authentication
expires "2022-07-29T09:48:43.000Z"
httpOnly true
path "/"
value "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiI2MmUyOTUzMmQwZGVmYjA5NGFiMTU0YzMiLCJpYXQiOjE2NTkwODQ1MjMsImV4cCI6MTY1OTA4ODEyM30.QfMS3hI-Jpyj9CCSPgQfxHplTewSX95rl7lLTVSm-pg"
And here is the POST response after login:
_id "62e29532d0defb094ab154c3"
email "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e296879196a2858f838b8ecc818d8f">[email protected]</a>"
In my app.module.ts
@NgModule({
declarations: [
AppComponent,
HomeComponent,
NotFoundComponent,
],
imports: [
CommonModule,
BrowserModule,
GraphQLModule,
HttpClientModule,
HomeComponent,
LoginModule,
SignUpModule,
AppRoutingModule,
],
providers:
[{
provide: APOLLO_OPTIONS,
useFactory: (httpLink: HttpLink) => {
return {
cache: new InMemoryCache(),
link: httpLink.create({
uri: '^api/graphql' //using proxy
})
}
},
deps:[HttpLink]
}],
bootstrap: [AppComponent]
})
export class AppModule {
}
For handling authentication, I have an auth.guard.ts
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(
private readonly authService: AuthService,
private readonly router: Router) {
}
canActivate() {
return this.authService.isAuthenticated().pipe(
tap((authenticated)=>{
if(!authenticated){
console.log('you should login')
this.router.navigate(['login']);
}
})
)
}
}
Here is a snippet from my app.component.ts
@Component({
selector: 'front-root',
templateUrl: './front.component.html',
styleUrls: ['./front.component.css']
})
export class FrontComponent implements OnInit {
isLoggedIn$: Observable<boolean>;
constructor(
private readonly authService: AuthService,
private readonly router: Router
) {
this.isLoggedIn$ = authService.authenticated$;
}
ngOnInit(): void {
}
}
And in my auth.service.ts
@Injectable({
providedIn: 'root'
})
export class AuthService {
private readonly authenticated = new Subject<boolean>();
authenticated$ = this.authenticated.asObservable();
constructor(private readonly httpClient: HttpClient) {}
isAuthenticated() {
return this.httpClient.get<boolean>('api/auth/login').pipe(
tap(() => {
this.authenticated.next(true);
}),
catchError(() => of(false)));
}
}
When trying to access the teachers route, I get a 404 error with the message "you should login". This error module redirects me to the login page instead.
In my proxy.conf.json
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
},
"logLevel": "debug"
}
}
And in my angular.json
"configurations": {
"production": {
"browserTarget": "front-end:build:production" ,
"proxyConfig": "src/proxy.conf.json"
},
"development": {
"browserTarget": "front-end:build:development",
"proxyConfig": "src/proxy.conf.json"
}
},