So I am currently implementing a "reset password" feature on my website. My application uses JWT for authentication. The application uses React (React Hooks, not components) on the frontend, with react-router-dom for the routing, and Flask on the backend.
The backend functionality works fine. A user fills in an email address of the email they wish to reset the password of, and then the backend sends an email with a link to that address they can click (at the moment, once clicked, it just returns an OK response and does nothing else).
My question is, after the link is clicked in their inbox, I want the user to be forwarded to a /change_password page where they can fill out a new password.
Once the email link is clicked, how can I then go from the Flask backend, to rendering a specific route in React?
I am using react-router-dom client-side routing throughout my application.
I am only asking as it seems a bit strange to have a mix of server-side and client-side rendering for an application. If I can forward to a page in in React, that would be nice.
So my routes are called by index.jsx
index.jsx
ReactDOM.render(<AppRouter/>, document.getElementById("app"));
routes.jsx
const AppRouter = () => {
const [user, setUser] = useState(null);
const providerValue = useMemo(() => ({user, setUser}), [user, setUser]);
return(
<BrowserRouter>
<Route exact path='/' component={LandingPage} />
<Switch>
<UserContext.Provider value={providerValue}>
<Route path="/login" component={LoginPage} />
<Route path="/register" component={RegisterPage} />
<Route path="/forgotten" component={ForgottenPage} />
<PrivateRoute path="/home" component={UserApp} />
</UserContext.Provider>
</Switch>
<Redirect from="*" to="/" />
</BrowserRouter>
)
}
At the moment, Flask just renders index.html which has 1 tag element id of app.
Any advice would be great.
Sorry not 100% understanding what your current setup is
Server Side Rendering
Yes exactly, send it over then when the button is clicked the token and user id should be sent to the backend and after verification the backend sends back a template which will then be filled out and sent to the api with the token and user ID again (at least how I would do it)
Client Side Rendering
The way I would go about this is in my Router have
<Route path "/recoverpassword/:tempToken">{recoverComponent}
And then have the link take you to app.com/recoverpassword/{tempToken}
Then set up a componentDidMount on the recoverComponent which calls the backend making sure the link is active and the token is valid. If it is then use the token to set up a new password.
You could try to use a listener of some sort but if they switch browsers to go to their email inbox just as an example then this won't work. Don't recommend that at all
Related
I am trying to use Okta to sign in to my react application.
Any users assigned either
via groups assigned to the app,
or via the ‘Everyone’ group
or via individual assignments do not work,
returning 401 error, as shown in the screenshots below. User auth is successful in okta however, as shown by the okta logs
Following is my App.js file
const history = useHistory();
const customAuthHandler = () => {
history.push('/login');
};
const restoreOriginalUri = async (_oktaAuth, originalUri) => {
history.replace(toRelativeUrl(originalUri || '/', window.location.origin));
};
return (
<Security>
oktaAuth={oktaAuth}
onAuthRequired={customAuthHandler}
restoreOriginalUri={restoreOriginalUri}
>
<Switch>
<Route exact path="/" render={() => <Home />} />
<Route path="/login" render={() => <Login />} />
<Route path="/login/callback" component={LoginCallback} />
<SecureRoute path="/users" render={() => <List />} />
.......
</Switch>
</Security>
);
The login page has the default embedded Okta SignIn Widget as mentioned in the react okta docs here - Sign in to your SPA with the embedded Okta Sign-In Widget | Okta Developer
(the mentioned src/Login.jsx and src/OktaSignInWidget.jsx are almost similar)
What do I seem to be missing here, the okta react widget is almost identical to the one in the docs, any users used are assigned to the app in one way or the other yet the widget shows access denied. Is this a generic message which is displayed for many errors? Any help would be appreciated.
The latest version of okta SDKs for auth, react-router-dom v5 for routing
I was able to fix the issue, as I was using Interaction code, I had to enable it in the Okta admin dashboard. To do this go to
Security > API > Authorization server > Default auth server > Access Policies > Default Policy Rule > Edit Rule > Select Interaction Code checkbox if unselected
Your auth server/access policy/Rule may be different according to your use case but I am using all defaults.
I have a react app with a user flow management system with Azure AD. I'm clicking on a button to call the Azure AD url to get the access of Sign-in page. After entering the data, I'm clicking on the Signing button and I'm getting the url as follows
localhost:3000/#id_token=XXXXXXXXXX
And the loading page says that "This site can't provide a secure connection. Localhost sent an invalid response."
The problem is how can I get this token to my react component to decode it by jwt-decode and do the rest? I tried with creating a route as follows to catch the url but that component never shows. Still loading the Error page with the token url.
<Route path='/#id_token=' component={TokenComponent} />
This is my code
Signin.js
class Signin extends Component {
render() {
return (
<Link to='/azureUrl'>Go to Azure</Link>
)
}
}
index.js
render(
<AppProvider>
<BrowserRouter>
<Switch>
<Route path='/#id_token=' component={TokenComponent} />
<Route path='/azureUrl' component={() => {
window.location.href='http://XXX.b2clogin.com/XXXXXXXXXXXX'
return null
}} />
</Switch>
</BrowserRouter>
</AppProvider>
)
I am developing a dashboard application using React. I am having some issues understanding react-router. How can we use the dynamic route and render a component?
My app has a few static routes like /user, /profile and /dashboard. I am rendering User, Profile and Dashboard components for the routes. When the user logs in, the server will send JSON response which contains, user id, type, and other fields. I want to change the routing path to /dashboard/45 (45 is userId) for this user after a successful login. In the end, the Dashboard component will render different elements based on userId and userType.
<Route
path='/dashboard'
exact={true}
render={(props) => <Dashboard {...props} user={user} handleChildFunc=
{this.handleChildFunc}/>}/>
What is missing in this code? I am not sure what to google or which tutorial to follow. Thanks in advance.
This is what I use:
<Route exact path='/feed/:id' component={
(props) =>
<Feed
postId={props.match.params.id}
/>
}/>
Then the id can be accessed inside Feed using props.postId e.g.
constructor(props) {
super(props);
if (props.postId) {
// do something
}
}
I'm trying to figure out how to get the account activation link to React.
The Rails API sends an account activation URL as follows:
http://localhost:8080/users/confirm?token=480a476e6be366068dff
I would like to setup a React action that POSTs that token to the API and then a component will render a "account activated" message.
I am currently stuck on 2 issues:
How to directly open the above link in the browser? I'm getting a "Cannot GET /users/confirm" error message. I read that browserHistory is supposed to solve the problem of directly calling React URLs but I'm not sure how to implement it.
How to capture the token from the link? Is "/users/confirm/:token" the correct approach?
routes.jsx:
export default (
<Route history={browserHistory} path="/" component={App}>
<IndexRoute component={HomePage} />
<Route path="/users/login" component={LogInPage} />
<Route path="/users/register" component={RegisterPage} />
<Route path="/users/confirm/:token" component={ConfirmPage} />
</Route>
);
Whatever web server you're using to serve the react code needs to handle that route too. So if you're rendering the html page that bootstraps the react code with rails, add the route to the routes.rb, and have it render the file that loads your bundle.
Now in order to have the token come as a parameter like that:
<Route path="/users/confirm/:token" component={ConfirmPage} />
You'll need to have the rails api direct to it in the same way:
http://localhost:8080/users/confirm/480a476e6be366068dff
If you need to use the query string, update the route in react:
<Route path="/users/confirm" component={ConfirmPage} />
Then in the confirm page, get the token from the query string itself. You can do this in a few ways. I haven't tried it, but I believe react router parses it for you. In the ConfirmPage, access it by:
this.props.location.query.token
Router for Did You have an account? in Material UI ReactJS
handleClickSignIn() {
this.props.history.push("/Register");
}
return(<div><p style={signstyle} > Don't have an account yet?
< a href onClick={this.handleClickSignIn.bind(this)} >Join Register</a>
</p></div>)
I'm attempting to hook up email/pw auth with email verification using Firebase. I'm using React + Redux + React-Router. The account creation is going fine - the user account is created in the Firebase user database, but the issue I'm having is in trying to capture the "mode" and "oobCode" from the link that Firebase provides in its email verification (the URL format is .../verify?mode=foo&oobCode=bar). I have Firebase linking (for the moment) to localhost:3000/verify, so in my routes, I tried to add a route path like this:
<Router history={ browserHistory }>
<Route path="/" component={ MainApp }>
<IndexRoute component={ LandingPage } onEnter={ redirectIfLoggedIn } />
<Route path="verify/:mode/:oobCode" component={ LandingPage } onEnter={ redirectIfVerified } />
// other routes
</Route>
</Router>
However, when I click on the URL in the e-mail, I get an error page. Essentially, all I'm trying to do is intercept that incoming e-mail link, check if the mode & oobCode are correct using Firebase's applyActionCode, then either send the user to the main logged-in page or to an error page. Any idea what I'm missing here?
The url format you receive is .../verify?mode=foo&oobCode=bar.
Route should look like this -
...
<Route path="verify" component={ LandingPage } onEnter={redirectIfVerified } />
...
mode and oobCode are query params. You can get these values in your component from the location object injected into the props.
this.props.location.query = {mode: "foo", oobCode: "bar"}