In my AuthApiStack I want to get the `site.url` th...
# help
k
In my AuthApiStack I want to get the
site.url
that's in the FrontendStack.
Copy code
export function AuthApiStack({ stack, app }) {
  const { bucket } = use(StorageStack);
  const { table } = use(StorageStack); //This new ApiStack references the table resource from the StorageStack that we created previously.

  const auth = new Auth(stack, "Auth", {
    login: ["email"],
    cdk: {
      userPoolClient: {
        supportedIdentityProviders: [
          cognito.UserPoolClientIdentityProvider.GOOGLE,
          cognito.UserPoolClientIdentityProvider.COGNITO,
        ],
        oAuth: {
          callbackUrls: [
            app.stage === "prod"
              ? "<https://dfwwlqfwiq3c2.cloudfront.net/>"
              : "<http://localhost:3000>",
          ],
          logoutUrls: [
            app.stage === "prod"
              ? "<https://dfwwlqfwiq3c2.cloudfront.net/>"
              : "<http://localhost:3000>",
          ],
        },
      },
    },
  }); ...
I want to replace the cloudfront urls with site.url but this stack is in use buy the FrontendStack
Copy code
export function FrontendStack({ stack, app }) {
  const { auth, api, domain } = use(AuthApiStack);
  const { bucket } = use(StorageStack);

  const site = new ReactStaticSite(stack, "ReactSite", {
    path: "frontend",
    environment: {
      REACT_APP_API_URL: api.customDomainUrl || api.url,
      REACT_APP_REGION: app.region,
      REACT_APP_BUCKET: bucket.bucketName,
      REACT_APP_USER_POOL_ID: auth.userPoolId,
      REACT_APP_IDENTITY_POOL_ID: auth.cognitoIdentityPoolId,
      REACT_APP_USER_POOL_CLIENT_ID: auth.userPoolClientId,
      REACT_APP_API_STAGE: app.stage,
      REACT_APP_COGNITO_DOMAIN: domain.domainName,
    },
  });

  stack.addOutputs({
    SiteUrl: site.url,
  });
}
My frontend React also needs SiteUrl but I cans easily pass it through the environment variables.
f
Hey @Kenny, it will result in cyclic dependency between the two stacks, each depends on a value from another stack.
One workaround being, if you use a custom domain for the ReactSite, you can hardcode the oAuth urls.
Does that work for you?
k
that means I should buy it right?
Route53?
f
yeah.. another workaround being:
you can use SSM to break cyclic dependencies like this, for example
Copy code
// FrontendStack
const site = new ReactStaticSite(..);
new ssm.StringParameter(stack, "SiteURL", {
  parameterName: "SiteURL",
  stringValue: site.url;
});

// AuthApiStack
const auth = new Auth(stack, "Auth", {
  ...,
  callbackUrls: [
    ssm.StringParameter.fromStringParameterAttributes(stack, "SiteURL", {
      parameterName: "SiteURL",
    }).stringValue
  ],
  ...,
});
In this setup, only FrontendStack depends on AuthApiStack, not the other way around.
The downside being that the first time AuthApiStack is deployed, the SSM parameter hasn’t been created. So the callback urls don’t exist. You’d have to deploy again.
k
oww
f
yeah it’s a bit cumbersome.. i think most ppl go with the custom domain approach
k
olrite