How to redirect a user from django to react during email account activation

Question

I have spent days looking for solution to this but I keep walking round in circles. I have a react application that is receiving API from django. Every part of the react app and django is working individually. With postman I can test the APIs account for email verification and the user gets verified. When I fill account registration form in react and submit it, the user is sent an email confirmation message. When I click on the activation link I got 'Page not found 'error. How do I redirect the user to react since the email activation link is created in django and as such has django domain and not react domain.

React App

function App() {
  return (
    <Router>
      <Header />
      <main className="py-3">
        <>
        <Route path='/signup' component={SignUpScreen} />
        <Route exact path='/activate/:uid/:token' component={ ActivateAccount} />
        </>
      </main>
    </Router>
  );
}

Account Activation Component
const ActivateAccount = ({ verify, match }) => {
    const [verified, setVerified] = useState(false);
    const dispatch = useDispatch()


    const verify_account = e => {
        const uid = match.params.uid;
        const token = match.params.token;

        dispatch(verify(uid, token));
        setVerified(true);
    };

    if (verified) {
        return <Redirect to='/' />
    }

    return (
        <Container className=' auth-container pt-4'>
            <Form className="auth-form">
                <Button 
                    className="auth-button  btn btn-block w-100" 
                    type="submit"
                    onClick={verify_account}
                    >
                        Activate Account
                    </Button>
            </Form>
    </Container>
    )
}

export default connect(null, { verify })(ActivateAccount);

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('djoser.urls')),
    path('api/', include('djoser.urls.jwt')),
    path('api/', include('accounts.urls')),
]

settings.py

DJOSER = {
    'SEND_CONFIRMATION_EMAIL': True,
    'USER_CREATE_PASSWORD_RETYPE': True,
    'LOGIN_FIELD': 'email',
    'SET_USERNAME_RETYPE': True,
    'SET_PASSWORD_RETYPE': True,
    'ACTIVATION_URL': 'activate/{uid}/{token}',
    'SEND_ACTIVATION_EMAIL': True,
    'SERIALIZERS': {
        'user_create': 'accounts.serializers.UserCreateSerializer',
        'user': 'accounts.serializers.UserCreateSerializer',
        'current_user': 'accounts.serializers.UserCreateSerializer',
    }
}

Please any help on how I can accomplish this is highly cherished

Answer 1

Seems to me that your best option is to have the generated activation url point to your React domain, have the information needed hashed in a url query param, and then call the /activate endpoint from within your React app.