Auth0 Lock Component not showing in React with container option - javascript

(Using React) I have a /login route and a /signup route to display Login and SignUp components. In my Login component I'm using Auth0's Lock component to display a login form and I'm also using the container configuration option for the form to be displayed in my own div rather than as the default modal.
When my Login component loads for the first time (or after a refresh of the /login route) the Auth0 Lock component loads correctly. My problem is when I navigate from the /login route to the /signup route and then back to the /login route and the Auth0 Lock component does not load at all. When inspecting the page I can see that my container div is empty.
I've found this issue on Auth0's github of others running into the same problem using Angular, but their solution is to set auth.config.auth0lib.$container to null which doesn't seem to be a good solution.

After looking through the auth0 Lock source I found the hide method which has solved my problem:
hide() {
closeLock(this.id, true);
}
In my Login component I override the componentWillUnmount method, get a reference to the Auth0Lock, and call hide():
componentWillUnmount() {
this.lock.hide();
}
Now when I navigate away from my Login component at /login to another route and then back to /login the Auth0 Lock component reloads and displays correctly.

Related

Vue issue navigationg to and from error page

I am working on a single page application with vuex and vue routing.
Current Setup:
navigation via dropdown menu and matching searchstring from a textfield
on search-btn click navigate to a result page with the search-text as parameter
in the created() method of that result page fire action to the api
-- if the request was successful continue to load the page
-- if the request was not successul redirect to a "NotFound" error page (for example misspelled word was not found in database)
the problem
I cannot navigate back again once I hit the NotFound page. It will try to load the previous page with /result/wrong_word path that will again lead to the NotFound page. How can I solve this? Is there a way to manipulate the history stack of vue router?
in router.js:
mode: 'history'

react-router-dom back with previous state

I have an app with react-router-dom and use the BrowserRouter component. In the app, I have route /query-builder that will essentially build a query string through picking values from tables etc. Once the user has the query string built, they can navigate to /search?q=<some querystring> via the useHistory() hook from react-router-dom and history.push('/search?q=${queryString}').
What I would like to know, is it possible to navigate back to the /query-builder route, via the browser back button, and see the page as it was just before I navigated to /search so the user could make amendments to the query. What I am seeing at the moment, is that the query-builder component will go back to its initial state, as it is mounting again.
I could use redux to manage the query builder state and rehydrate the components from that, but I am wondering am I missing something available in the react-router / react-router-dom packages?
Look like useContext is best variant to solve your problem. Save variables in query-builder, then you can easily go back without any scare) Also it'll work properly both in history.goBack() and browser back

Authenticate with custom page Auth0

I am new to auth0. I would like to host my own signup and login page. I managed to generate a signup page and successfully call dbconnections/signup, but I have no luck with the login. Currently I am trying oauth/token but I am getting "Authorization server not configured with default connection.”. Is there another API call that I can use for login (username + password)?
Go to settings in Auth0 for your account. The dropdown at the top of your menu.
At settings scroll down to Default Directory and put the name of your database there. Eg: Username-Password-Authentication
Ive posted a detailed ansewr for how to move past this exact issue here
https://stackoverflow.com/a/52157069/3256123

Angular(4) router does not replace routes rather stacks them up when called from inside Google API load callback

I am trying to use Google Authentication in my Angular 4 app. I loaded Google platform.js and api.js in index.html. Now onClick login button I do
gapi.load('auth2', () => {
this.router.navigateByUrl('/home');
});
Now instead of replacing the previous route, Angular is stacking the new route over the old route (/login). I can see from web console that both my Login and Home components are present as below,
<app>
<router-outlet><router-outlet>
<home></home>
<login></login>
</app>
Home is supposed to replace Login, but that didn't happen. Can anyone offer some help here?
Gapi client library does not go well with Angular, I used Rest API calls instead. That solved the issue.

How to programmatically navigate with preact-router?

I'm trying to figure out how to structure the frontend part of a web application using typescript, preact and preact-router. I've come a long way but I still need to figure out how to programmatically navigate (redirect) with preact-router. I can do history.replaceState(null, null, '/#/redirectedUrl');, but while that changes the URL in the location bar, preact-router doesn't route to the new URL.
What is the preferred way to programmatically navigate when using preact-router?
Importing the function route from 'preact-router' is the way to go:
import { route } from 'preact-router';
route('/url/to/rout/to');
You can do it in two ways based on your need
import { route } from 'preact-router';
route('url');
This will create a pushState in the history (i.e.,) it will create a new entry for this url
import { route } from 'preact-router';
route('url', true);
This will create a replaceState in the history (i.e.,) this will replace the current page url entry in the history with the url you will be routing to. You can make use of this in cases like, when routing from login screen to your home/dashbaord screen, where on click of browser back button, you don't want user to go back to login screen once the user has been logged in (thus replacing the login entry with your dashbaord entry).

Categories

Resources