Search code examples
active-directoryreact-routeradfsform-post

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


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.


Solution

  • 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