loopbackio / loopbackio/loopback-next

How to integrate passport authentication without express web app?

Open
#10,127 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
5.1k
Forks
1.1k
Avg merge
2d 21h
Merged PRs (30d)
27

Description

### Describe the bug

I have my front-end separated from my loopback application and I am trying to implement authentication through passport.

However I receive the following error (after it is making a GET request to `https://myapi.com/auth/thirdparty/twitter`):

`Request GET /auth/thirdparty/twitter failed with status code 500. InternalServerError: Error: OAuth authentication requires session support. Did you forget to use express-session middleware?`

The only adjustment I have made is to remove the web-application folder from the [loopback-passport example](https://github.com/loopbackio/loopback-next/tree/master/examples/passport-login) repository.

I then tried to integrate it with my React JS application.I made slight modifications to the src/controllers/oauth2.controller.ts:

```javascript
@authenticate('oauth2')
@get('/auth/thirdparty/{provider}')
/**
* This method uses the @authenticate decorator to plugin passport strategies independently
*
* Endpoint: '/auth/thirdparty/{provider}'
* an endpoint for api clients to login via a third party app, redirects to third party app
*/
loginToThirdParty(
@param.path.string('provider') provider: string,
@inject(AuthenticationBindings.AUTHENTICATION_REDIRECT_URL)
redirectUrl: string,
@inject(AuthenticationBindings.AUTHENTICATION_REDIRECT_STATUS)
status: number,
@inject(RestBindings.Http.RESPONSE)
response: Response,
) {
return {redirectUrl: redirectUrl};
}

@oAuth2InterceptExpressMiddleware()
@get('/auth/thirdparty/{provider}/callback')
/**
* This method uses the passport strategies as express middleware
*
* Endpoint: '/auth/thirdparty/{provider}/callback'
* an endpoint which serves as a oauth2 callback for the thirdparty app
* this endpoint sets the user profile in the session
*/
async thirdPartyCallBack(
@param.path.string('provider') provider: string,
@inject(SecurityBindings.USER) user: UserProfile,
@inject(RestBindings.Http.REQUEST) request: Request,
@inject(RestBindings.Http.RESPONSE) response: Response,
) {
// const profile = {
// ...user.profile,
// };
// request.session.user = profile;
// response.redirect('/auth/account');
return response;
}
```

In `src/authentication-strategy-providers/twitter.express-mv.ts` I also tried to set session to false:

```javascript
@injectable.provider({scope: BindingScope.SINGLETON})
export class TwitterOauthExpressMiddleware implements Provider {
constructor(
@inject('twitterStrategy')
public twitterStrategy: TwitterStrategy,
) {
passport.use(this.twitterStrategy);
}

value() {
return passport.authenticate('twitter',{session: false});
}
}
```

but unfortunately no luck.

Any support is welcome!

### Logs

_No response_

### Additional information

_No response_

### Reproduction

-

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the passport-login example and the referenced src/controllers/oauth2.controller.ts and src/authentication-strategy-providers/twitter.express-mv.ts files, then trace how the OAuth callback and session options are wired. Done would require a confirmed authentication approach for a separated React client without the reported session error, along with a reproducible test or documented integration guidance.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, react, typescript
Domain
api, authentication, backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.