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
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.