Skip to content

Merge AuthGuardOptions.redirectLoginOptions.appState in AuthGuard #434

@adam-earthscope

Description

@adam-earthscope

Checklist

  • I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
  • I have looked into the API documentation and have not found a suitable solution or answer.
  • I have searched the issues and have not found a suitable solution or answer.
  • I have searched the Auth0 Community forums and have not found a suitable solution or answer.
  • I agree to the terms within the Auth0 Code of Conduct.

Describe the problem you'd like to have solved

We have a lot of SPAs so we are using a central "/login-redirect" callback path for all logins; as suggested by the Auth0 docs we are storing the actual return path in appState, and the callback reads the appState value and generates the proper redirect.

Our problem is that our SPAs run under subpaths, so the appState.target value isn't sufficient for a full redirect as it only stores the relative routing path within the SPA.

We addressed this by including the base path in the appState:

const authGuard = createAuthGuard({
  redirectLoginOptions: { appState: { basePath: process.env.PUBLIC_PATH } },
});

With this, we get the base path back but we've lost the target (routing) path, because the guard code overwrites the appState entirely if one is provided in redirectLoginOptions, see https://github.com/auth0/auth0-vue/blob/main/src/guard.ts#L20:

    await client.loginWithRedirect({
      appState: { target: to.fullPath },
      ...redirectLoginOptions
    });

It would be helpful if this code merged the appState values here, so the resulting state has both the provided values and the calculated target value, ie.

    await client.loginWithRedirect({
      appState: { 
        ...redirectLoginOptions.appState,
        target: to.fullPath,
      },
      ...redirectLoginOptions
    });

Describe the ideal solution

If RedirectLoginOptions.appState is passed into the authGuard, the resulting appState includes both this and the target path added by the authGuard.

Alternatives and current workarounds

Our current workaround does the target mapping explicitly:

async function authGuard(to: RouteLocation) {
  return createAuthGuard({
    redirectLoginOptions: {
      appState: {
        target: to.fullPath,
        basePath: process.env.PUBLIC_PATH,
      },
    },
  })(to);
}

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    feature requestA feature has been asked for or suggested by the community

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions