Active Directory Federation Service response_mode=form_post trying to post to react application

1k Views Asked by At

We have a problem here when we are trying to connect to ADFS system via response_type = form_post.

We have to implement security for our React application through ADFS. We thought of implementing response_mode=form_post so that id_token will be coming as a variable in the form posted back to our application. Also we went with this approach so as to secure our id_token not to expose in the URL. Also when we need additional claims from ADFS, the only way is to request via response_mode=form_post. But if we try that way , we are getting the id_token in the form post but our react application is throwing "Cannot Post" error, since the application can be rendered only via GET.

The sample url with which we tried is as below

https://example.fedservice.com/adfs/oauth2/authorize?response_type=id_token&redirect_uri=https://localhost:4000/&client_id=sample_client_id&nonce=12345&response_mode=form_post

We would like our application to get the posted response and use it for authentication and user information from id_token instead of telling "Cannot Post" error. How we can enable this? Any help is much appreciated.

1

There are 1 best solutions below

0
Karthick Shanmugam On BEST ANSWER

Finally I found a way where I can use the redirect_uri to be my node-js server So for example From reactapp App.js constructor i redirect to get api which was written in nodejs layer say http://mynodejsserver.com/login

constructor(props: any) {
    super(props)
    let idToken = localStorage.getItem('id_token')
    if (!idToken) {
      idToken = getCookie('idToken')
    }
    if (idToken) {
      localStorage.setItem('id_token', idToken)
    } else {
      window.location.href = `http://mynodejsserver.com/login?url=${window.location
        .pathname + window.location.search}`
    }
    this.state = {
      idToken,
    }
  }

In nodejs server, in login get api we made it to redirect to the fedservice authorization api like as below

app.get('/login', function(req, res) {
    const clientURLToRedirect = req.query.url
    res.redirect(

      `https://example.fedservice.com/adfs/oauth2/authorize?response_type=id_token&redirect_uri=http://mynodejsserver.com/id_token?route=${clientURLToRedirect}&client_id=sample_client_id&nonce=12345&response_mode=form_post`
    )
  })

  app.post('/id_token', function(req, res) {
    var idToken = req.body.id_token
    var url = req.query.route
    console.log(idToken)
    res.cookie('idToken', idToken)
    res.redirect('http://localhost:4000' + url) // my react app url
  })

Hence was able to achieve authorization with no much change in the Frontend by handling it in nodejs layer