loopbackio / loopbackio/loopback-next
How to integrate passport authentication without express web app?
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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