How to pass query params with oauth configuration.

Hello, I am trying to do faderatedSignin by Google/Facebook using oauth and hosted UI. Everything is working fine but after successful signin it’s redirecting back to my redirect url with no query params.

For example, I have signin page with url “http://localhost:3000/?name=xyz”. In the signin component I have added two buttons for Google and Facebook and calling faderatedSignin function with provider. After that it’s redirecting to google/facebook page and I am able to do signin through it. After successful signin it’s redirect back to “http://localhost:3000/”. But I am not able to access query param (?name=xyz). Please check the below code and do the needful.

OAuth configuration:

const awsmobile = {
    "aws_project_region": "XX",
    "aws_cognito_region": "XX",
    "aws_user_pools_id": "XX",
    "aws_user_pools_web_client_id": "XX",
    "oauth": {
        "domain": "XX.amazoncognito.com",
        "scope": [
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": "http://localhost:3000/",
        "redirectSignOut": "http://localhost:3000/",
        "responseType": "code"
    },
    "federationTarget": "COGNITO_USER_POOLS"
};

SignIn Component:

import React, { Component } from 'react';
import Amplify, { Auth, Hub } from 'aws-amplify';
import awsmobile from './aws-exports';
Amplify.configure(awsmobile);

class SignIn extends Component {
  
      constructor(props) {
          super(props);
  
          Hub.listen("auth", ({ payload: { event, data } }) => {
            console.log('data:---', data);
            switch (event) {
              case "signIn":
                  console.log('signin:---');
                  break;
              case "signOut":
                  console.log('signout:---');
                  break;
            }
          });
          this.state = {
             
          };
  
      }
  
  
      render() {
        
              return (
                  <div>
                      
                        <button onClick={() => Auth.federatedSignIn({provider: 'Google'})}>Open Google</button>
                        <button onClick={() => Auth.federatedSignIn({provider: 'Facebook'})}>Open Facebook</button>
                        <button onClick={() => Auth.federatedSignIn()}>Open Hosted UI</button>
                        <button onClick={() => Auth.signOut()}>Sign out</button>
                   
                  </div>
              );
          }
        
      }
  

export default SignIn;

[manueliglesias]

@anis-shaikh I see, this is a good use case for the state param (see AUTHORIZATION endpoint)

Currently, Amplify generates a pseudo-random state for CSRF protection purposes and it is not exposed or modifiable.

I think it would be useful to provide you own state when calling Auth.federatedSignIn().

I am tagging this as a feature request.

[github-actions[bot]]

This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.