Can Passport authentication and JWT be used together?

[zjjdes]

Hi community,

I'm quite new to LoopBack 4 and passport authentication and have a few questions about their implementation. I followed the todo-jwt example and managed to implement JWT authentication, and passport-login to study passport authentication using third-party OAuth2 (e.g. Google).

I have the following questions about the passport-login example:

1. What I don't understand is when calling loginToThirdParty and thirdPartyCallBack in src/controllers/oauth2.controller.ts, does the Google OAuth2 strategy eventually gets converted to another strategy to handle the verification and token generation, etc., such as basic, local or session in src/authentication-strategies? If so, where does this conversion happen? If I want to have only local and Google logins, which ones in src/authentication-strategies should I keep?
2. When logged in using local login or third-party, a session token is generated in the Cookies. Is this from the session strategy? Is this token the same as JWT?
3. If I would like to use passport strategies for third-party login and authentication, but want to generate a JWT at the end and send it to front end, how should this be done? Is there an example on this?

Sorry if I misunderstood some of the basic concepts. I'm trying to migrate my LB3 server to LB4 and got very confused about authentication, as in LB3 this is mostly done by the built-in authentication and passportConfigurator. In LB3 it automatically creates an AccessToken model to store the access tokens, which has [id, userId, ttl]. If I understood it correctly this is session-based, as opposed to JWT. Is there an example implementing something equivalent to this in LB4?

Thanks in advance.

[zjjdes]

I managed to implement both passport strategies and JWT authentication and it seems to be working. I modified thirdPartyCallback() in loopback4-example-passport-login/src/controllers/oauth2.controller.ts to the following to mimic passportConfigurator.configureProvider() in LB3 which sends the access token and userId as Cookies:

  @oAuth2InterceptExpressMiddleware()
  @get('/auth/{provider}/callback')
  async thirdPartyCallBack(
    @param.path.string('provider') provider: string,
    @inject(SecurityBindings.USER) user: UserProfile,
    @inject(RestBindings.Http.REQUEST) request: RequestWithSession,
    @inject(RestBindings.Http.RESPONSE) response: Response,
  ) {
    const userId = user.profile.id;
    const foundUser = await this.userRepository.findById(userId);

    // convert a User object into a UserProfile object (reduced set of properties)
    const userProfile = this.userService.convertToUserProfile(foundUser);

    // create a JSON Web Token based on the user profile
    const token = await this.jwtService.generateToken(userProfile);

    // redirect to front end with JWT
    response.cookie('userId', userId, {signed: request.signedCookies ? true : false, maxAge: 2592000});
    response.cookie('access_token', token, {signed: request.signedCookies ? true : false, maxAge: 2592000});
    response.redirect(`https://front.end.com`);

    return response;
  }

Not sure if this is best practice though.

I noticed that here response is Response from @loopback/rest whereas when I generated the project the endpoints have a @response decorator which is response from @loopback/rest. What's the difference between these two? How can I add a redirect in @response?