How to support multiple redirect URLs of Auth with Amplify

Faced an issue to support multiple redirect URLs for Auth with Amplify

I faced the below issue when I specified multiple redirect URLs and used .federatedSignInwith Amplify module in React app.

Redirect URL error

The bare minimum code base to reproduce is here:

import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
Auth.federatedSignIn();

Which is known issue

This is known issue and basically you need to specify a single URL to your awsconfig before calling Amplify.configure as it’s recommended in the thread.

Allowing multiple redirectSignIn/redirectSignOut urls breaks federated auth · Issue #2792 ·…

Some comments in the issue says that you need to copy the Object of the awsconfig, but property of Object in JavaScript is reference as long as you do not do deep copy so that I directly overwrote the props and it worked.

A workaround to use multiple redirectSignIn and redirectSignOut URLs

Simple way by using the same domain with the app

This works only when redirectSignIn is the same with window.location.origin.

import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
awsconfig.oauth.redirectSignIn = `${window.location.origin}/`;
awsconfig.oauth.redirectSignOut = `${window.location.origin}/`;
Amplify.configure(awsconfig);

Customizable way by using environment variables

As Amplify can host frontend per branch or PR, you’d probably want to leverage environment variables. This example is to use Amplify’s environment variable called AWS_BRANCH and switch the redirect URL based on the branch name.

import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
if (process.env.REACT_APP_AWS_BRANCH === "master") {
  awsconfig.oauth.redirectSignIn = "<Your prod URL>";
  awsconfig.oauth.redirectSignOut = "<Your prod URL>";
} else {
  awsconfig.oauth.redirectSignIn = "<Your dev URL>";
  awsconfig.oauth.redirectSignOut = "<Your dev URL>";
}
Amplify.configure(awsconfig);

In addition, you need to pass Amplify’s environment variables via .env file.

REACT_APP_AWS_BRANCH=$AWS_BRANCH
REACT_APP_AWS_COMMIT_ID=$AWS_COMMIT_ID

Growing with community

Key learning here is that reporting an issue and sharing what workaround you found is one of the great ways to contribute to the Software you use on daily basis. It is always fun moment when a solution is found.

Works!