# Redirect to url after signup (from within rule?)

**URL:** <https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252>\
**Category:** Get Help\
**Created:** [April 16, 2021, 4:40pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252 "2021-04-16T16:40:39Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![YassineDM](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/yassinedm/32/19525_2.png) [@YassineDM](https://community.auth0.com/u/YassineDM)\
**Post date:** [April 16, 2021, 4:40pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/1 "2021-04-16T16:40:39Z")

</div>

Hi,

I followed the (excellent) guide described [here](https://community.auth0.com/t/the-complete-guide-to-react-authentication-with-auth0/45918/112) and everything works fine.

I tried to implement a rule for basic redirection to a specific url (e.g. “/:locale/onboarding”) after signup, like this:

```auto
function (user, context, callback) {
  var loginCount = context.stats && context.stats.loginsCount ? context.stats.loginsCount : 0;
  var url = "http://localhost:3000/en/onboarding";
  
  if (loginCount <= 1) {
    context.redirect = { url };
  }
  
  return callback(null, user, context);
}

```

However, the then gets stuck in a loop, with no error shown in the console and this url:

```auto
http://localhost:3000/en/onboarding?state=hKFo2SBtLXEyWGdUdkY2S0pGRTAzNy03ajlaeVM2bmRYaEVReKFuqHJlZGlyZWN0o3RpZNkgaGdXaElDSzJrY0M0RGsybGVHRDVvQlAzRG5mTG9wTlmjY2lk2SBsOGFiZGxVandSZ29lOGtVenRWUjNtd2ptd1VHbGNOUQ

```

Could you please tell me what went wrong?

Looking forward to hearing back from you…

Yassine

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 16, 2021, 4:46pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/3 "2021-04-16T16:46:16Z")

</div>

Hi @YassineDM,

Are you redirecting the user to `/continue` to complete authentication?

```auto
https://YOUR_DOMAIN/continue?state=THE_ORIGINAL_STATE

```

You can find more info on redirecting from within rules here:

> **[Redirect Users from Within Rules](https://auth0.com/docs/customize/rules/redirect-users)**
>
> Learn how to customize authentication flows by redirecting users using rules. Example areas that can be customized include MFA, privacy policy acceptance, and gathering user data.

---

<div class="post-metadata">

**Author:** ![YassineDM](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/yassinedm/32/19525_2.png) [@YassineDM](https://community.auth0.com/u/YassineDM)\
**Post date:** [April 16, 2021, 5:13pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/4 "2021-04-16T17:13:09Z")

</div>

Do I put this redirection logic here?

```auto
	const onRedirectCallback = (appState) => {
		history.push(appState?.returnTo || window.location.pathname)
	}

```

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 16, 2021, 5:19pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/5 "2021-04-16T17:19:37Z")

</div>

It would be after the user completes their onboarding. When they submit, the user should be redirected to `/continue` so that they can be fully authenticated.

---

<div class="post-metadata">

**Author:** ![YassineDM](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/yassinedm/32/19525_2.png) [@YassineDM](https://community.auth0.com/u/YassineDM)\
**Post date:** [April 16, 2021, 5:35pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/6 "2021-04-16T17:35:52Z")

</div>

I would like to redirect users AFTER authentication. Do I actually need to do that within a rule, or within the Auth0ProviderWithHistory component mentioned here:

> **[The Complete Guide to React User Authentication with Auth0](https://auth0.com/blog/complete-guide-to-react-user-authentication/?_ga=2.90659549.637641561.1618495670-472869511.1617802326)**
>
> Learn how to add user authentication to React using Context and Hooks. Learn the core concepts of React authentication.

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 16, 2021, 5:49pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/7 "2021-04-16T17:49:13Z")

</div>

Oh, I see! Yes, the application would handle the redirect in that case instead of a rule.

You could alter your rule to instead add a flag in the ID token that will let your app know that the user requires onboarding:

```auto
function (user, context, callback) {
  var loginCount = context.stats && context.stats.loginsCount ? context.stats.loginsCount : 0;
  var namespace = "http://your-app-uri"; // a namespace is required for custom claims to avoid collision
  
  if (loginCount <= 1) {
    context.idToken[namespace + 'requiresOnboarding'] = true;
  }
  
  return callback(null, user, context);
}

```

Here is info about setting up a single callback URL in your app that handles redirects:  
[https://community.auth0.com/t/how-do-i-set-up-a-dynamic-allowed-callback-url/60268](https://community.auth0.com/t/how-do-i-set-up-a-dynamic-allowed-callback-url/60268)

---

<div class="post-metadata">

**Author:** ![YassineDM](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/yassinedm/32/19525_2.png) [@YassineDM](https://community.auth0.com/u/YassineDM)\
**Post date:** [April 16, 2021, 6:03pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/8 "2021-04-16T18:03:00Z")

</div>

> [@stephanie.chamblee](#):
>
> `context`

Ok. Then where do I get access to the context object? As far as I know, the onRedirectCallback only exposes the appState…

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 16, 2021, 7:43pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/9 "2021-04-16T19:43:05Z")

</div>

The context object in the code snippet above is within a rule ([Context Object Properties in Rules](https://auth0.com/docs/rules/context-object)). The rule determines whether the user needs to do onboarding and adds a custom claim to the ID Token. Your app can read this custom claim in the `user` object to see if they need to be redirected.

You could instead store this in `appState` if you have a dedicated sign up button, but if a user were to click login, and then switch to “sign up” from within the Universal Login, then your app will have no way to know that the user is new.

---

<div class="post-metadata">

**Author:** ![YassineDM](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/yassinedm/32/19525_2.png) [@YassineDM](https://community.auth0.com/u/YassineDM)\
**Post date:** [April 19, 2021, 8:28am UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/10 "2021-04-19T08:28:33Z")

</div>

> [@stephanie.chamblee](#):
>
> `"http://your-app-uri"`

Ok. So the rule I create adds a new attribute to the user object, say “[http://my-app-uri/requiresOnboarding](http://my-app-uri/requiresOnboarding)”. Now where should I put the redirection logic, e.g. history.push(“/:locale/onboarding”)?

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 19, 2021, 11:57am UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/11 "2021-04-19T11:57:34Z")

</div>

Great! Your app can read the custom claim like so:

```auto
const { user } = useAuth0();
const requiresOnbiarding = user['http://my-app-uri/requiresOnboarding'];

```

I’m not sure of the best way to handle the redirect in React. I will have to do a little more research on that and let you know!

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 20, 2021, 2:50pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/12 "2021-04-20T14:50:09Z")

</div>

Hi @YassineDM,

Here are the options have found for redirecting after signup (summarizing ones we’ve already discussed):

1. [Progressive profiling using rules](https://auth0.com/docs/rules/redirect-users) - This is the recommended approach, but it does require your app to redirect the user back to your Auth0 tenant to complete the authentication flow. The user would log in, fill out their onboarding, and then be redirected to the `https://YOU_AUTH00_DOMAIN/continue` endpoint along with the `state` query param.

Example rule:

```auto
function (user, context, callback) {
  var loginCount = context.stats && context.stats.loginsCount ? context.stats.loginsCount : 0;
  var url = "http://localhost:3000/en/onboarding";
  
  if (context.protocol !== "redirect-callback" && loginCount <= 1) {
    context.redirect = { url };
  }
  
  return callback(null, user, context);
}

```

1. Redirecting using `appState` - This would be the easiest to implement, but it would mean that you would need to prevent users from logging in from the Universal Login. If they click “Sign up”, then they would need to be a new user signing up, and they could not select the “Already have an account? Login” option. This can be configured, but it is probably not ideal.

Example sign up button:

```auto
      <button
        className="btn btn-primary btn-block"
        onClick={() => loginWithRedirect({
            screen_hint: signup,
            appState: {redirectTo: '/onboarding'} })}
      >
        Sign up
      </button>

```

1. Custom component wrapper - You can use a [rule](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/7) to inform your app if it is the first time the user has logged in, and then write a component wrapper to use on your protected routes. I tested this out using the example app from the blog you mentioned:

New `src/auth/with-onboarding-redirect.js` file:

```auto
// src/auth/with-onboarding-redirect.js

import React from 'react';
import { useState, useEffect } from "react";
import { useHistory } from 'react-router-dom';
import { useAuth0 } from '@auth0/auth0-react';

const statusClaim = 'https://demo.com/isOnboarded';

export function WithOnboardingRedirect(props) {
  const history = useHistory();
  const { getIdTokenClaims } = useAuth0();
  const [isOnboarded, setOnboarded] = useState(false);
  useEffect(() => {
    async function getOnboardingStatus () {
      const claims = await getIdTokenClaims();
      return claims && claims[statusClaim];
    }
    async function checkOnboardingStatus () {
      const status = await getOnboardingStatus();
      const isOnboarded = status;
      if (!isOnboarded) {
        history.push('/onboarding');
      } else {
        return setOnboarded(true);
      }
    }
    checkOnboardingStatus();
  }, [getIdTokenClaims, history]);

  return isOnboarded ? props.children : <div>Your onboarding component</div>
};

```

`src/auth/protected-route.js` file

```auto
// src/auth/protected-route.js

import React from "react";
import { Route } from "react-router-dom";
import { withAuthenticationRequired } from "@auth0/auth0-react";
import { WithOnboardingRedirect } from "./with-onboarding-redirect"
import { Loading } from "../components/index";

class ProtectedRoute extends React.Component {
  render() {
    return (
      <WithOnboardingRedirect
        component={this.props.component}
      >
      <Route
        component={withAuthenticationRequired(this.props.component, {
          onRedirecting: () => <Loading />,
        })}
        {...this.props.args}
      />
    </WithOnboardingRedirect>);
  }
}

export default ProtectedRoute;

```

---

<div class="post-metadata">

**Author:** ![YassineDM](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/yassinedm/32/19525_2.png) [@YassineDM](https://community.auth0.com/u/YassineDM)\
**Post date:** [April 21, 2021, 7:29am UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/13 "2021-04-21T07:29:20Z")

</div>

Hi,

Thanks for these options. Here are my comments:

1. Based on the blog post example, I still don’t know where I put the `https://my_auth0_domain/continue` redirection. In the `redirectUri` prop of the `Auth0Provider`?

2. Like you said, not ideal…

3. I get that it would redirect any user to my onboarding flow but only when he would attempt to access a protected route, so not necessarily after signup, right? Do I need, on top of that, to change my `redirectUri` then?

Thank you again for your help,

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 21, 2021, 11:41am UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/14 "2021-04-21T11:41:28Z")

</div>

(In a couple of my previous messages, I accidentally put `/complete` when I meant `/continue` 😓. Sorry for any confusion that may have caused! I am going to edit those for future readers)

1. The redirect to `https://my_auth0_domain/continue` would take place after the user completes their onboarding. For instance, if you have an onboarding form with a submit button, the submit handler would need to redirect the user like so:

```auto
const urlParams = new URLSearchParams(window.location.search);
const state = urlParams.get('state');
window.location.href = `https://my_auth0_domain/continue?state=${state}`

```

Auth0 will then redirect the user back to the original `redirectUri` in your `Auth0Provider`, as if it is a normal login.

1. Yes, makes sense!

2. Yes, that is a good point! You’d likely need to wrap all routes in the custom wrapper instead of the protected routes only. Again, I think option one might be the best solution since you would not have to add a great deal of this logic in your own app.

---

<div class="post-metadata">

**Author:** ![YassineDM](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/yassinedm/32/19525_2.png) [@YassineDM](https://community.auth0.com/u/YassineDM)\
**Post date:** [April 27, 2021, 6:12pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/15 "2021-04-27T18:12:58Z")

</div>

Hi again,

Before even considering to redirect users to `https://my_auth0_domain/continue` at the END of onboarding, the app is stuck after signup BEFORE onboarding starts when I activate the rule (as I explained in my first message). Could you please use the blog post I mentioned to explain what adaptations I should make to my React app?

Besides, I stumbled upon [Auth0 Actions](https://auth0.com/blog/introducing-auth0-actions/), would it be interesting to use this instead (and how)?

---

<div class="post-metadata">

**Author:** ![stephanie.chamblee](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/stephanie.chamblee/32/26087_2.png) [@stephanie.chamblee](https://community.auth0.com/u/stephanie.chamblee)\
**Post date:** [April 29, 2021, 2:44pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/16 "2021-04-29T14:44:40Z")

</div>

Hi @YassineDM,

Here is a code example based on the app in the article: [GitHub - schamblee-auth0/react-app-with-onboarding-redirect-example](https://github.com/schamblee-auth0/react-app-with-onboarding-redirect-example)

Here is the code for the redirect rule:

```auto
function (user, context, callback) {
  var loginCount = context.stats && context.stats.loginsCount ? context.stats.loginsCount : 0;
  var url = "http://localhost:4040/onboarding";
  
  if (context.protocol !== "redirect-callback" && loginCount <= 1) {
    context.redirect = { url };
  }
  
  return callback(null, user, context);
}

```

Regarding Actions, this feature is in beta, and you can read the documentation here: [Auth0 Actions](https://auth0.com/docs/actions). There is not a public general release date yet, but I’d estimated it to be within this quarter.

In the current beta version of actions, you would redirect users like this:

```auto
module.exports = async (event, context) => {
  return {
    command: {
      type: "redirect",
      url: "http://localhost:4040/onboarding"
    }
  };
};

```

Actions follow the same pattern of rules where you will pass the state to the `/continue` URL.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [May 14, 2021, 2:44pm UTC](https://community.auth0.com/t/redirect-to-url-after-signup-from-within-rule/61252/17 "2021-05-14T14:44:43Z")

</div>

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.