Amplify-js: Pass "redirectUri" as a parameter to Auth.federatedSignIn

[ajhool]

Is your feature request related to a problem? Please describe.
Yes. There are several issues surrounding the current implementation of redirectUri. One of those issues is that you are permitted/encouraged to have multiple redirectUris when configuring Amplify in Amplify CLI. However, at runtime, Amplify fails when it tries to use multiple redirectUris in csv format.

Additionally, the redirect after signin should be flexible -- we have 5 different pages where the user might want to land after signing in, so we should be able to send the user to the target page.

Describe the solution you'd like
Auth.federatedSignIn({redirectUri: 'https://www[REDACTED]/someplace'})

Describe alternatives you've considered
Directly configuring Auth. This is not clean and fails when there are multiple buttons on a page that lead to different authenticated locations.

Additional context
I believe that the two sticking points for getting this to work are to:

1, update the isFederatedSignInOptions logic, which currently only checks for options related to direct federation with the social provider. When using cognito hosted UI, federatedSignIn expects no parameters.

1. If options contains a redirectUri, use it. See "NEW CODE" below.

// https://github.com/aws-amplify/amplify-js/blob/master/packages/auth/src/Auth.ts
        if (
            isFederatedSignInOptions(providerOrOptions) ||
            isFederatedSignInOptionsCustom(providerOrOptions) ||
            typeof providerOrOptions === 'undefined'
        ) {
            const options = providerOrOptions || {
                provider: CognitoHostedUIIdentityProvider.Cognito,
            };
            const provider = isFederatedSignInOptions(options)
                ? options.provider
                : (options as FederatedSignInOptionsCustom).customProvider;

            const customState = isFederatedSignInOptions(options)
                ? options.customState
                : (options as FederatedSignInOptionsCustom).customState;

            if (this._config.userPoolId) {
                const client_id = isCognitoHostedOpts(this._config.oauth)
                    ? this._config.userPoolWebClientId
                    : this._config.oauth.clientID;
                /*Note: Invenstigate automatically adding trailing slash */

                const redirect_uri = isCognitoHostedOpts(this._config.oauth)
                    ? this._config.oauth.redirectSignIn
                                        // NEW CODE
                    : options.redirectUri || this._config.oauth.redirectUri;

                this._oAuthHandler.oauthSignIn(
                    this._config.oauth.responseType,
                    this._config.oauth.domain,
                    redirect_uri,
                    client_id,
                    provider,
                    customState
                );
            }

Related to: #4244 #4308

[guillemmateos]

I was searching for a solution to do this. I think your proposal is nice @ajhool but I would probably consider adding redirectSignIn to FederatedSignInOptions(defined in types/Auth.ts). That way it can be checked in a similar way to what its done with provider.

I will see if I get some time to submit a PR for this, as it should be fairly easy and potential side-effects minimal.

[3dw1np]

Any news about this ?

[tobinbc]

I hate myself for doing this but this is a "workaround"

//action.ts
export const LoginAttemptGoogleAction = () => async (dispatch) => {
    Auth.configure({
        oauth: {
            ...Auth.configure().oauth,
            redirectSignIn: window.location.origin + window.location.pathname,
        },
    });
    Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Google });
};

// _app.tsx
oauth: {
    domain: "...auth.eu-west-2.amazoncognito.com",
    scope: [
       ...
    ],
    redirectSignIn:
        typeof window !== "undefined"
            ? window.location.origin + window.location.pathname
            : "http://localhost:3000/",
    redirectSignOut: "http://localhost:3000/",
    responseType: "code",
},

And in Cognito, add the urls you expect into the CallbackUrls

It works by initiating the app with the current location being the configured oauth. This is because when coming back from google etc, you land on this url directly so for Amplify to load in your global instance (_app.tsx in NextJS in this example), it needs to match against the url that's come back from Cognito/Google.

The actual login is simply done so it resets the Auth oauth configuration to include the relevant signin Url you want.