routing issue on react app hosted on github - javascript

I created a React app which has four routes, user,admin,home and bus.
if I want to access http://localhost:300/user I was able to access that,
but after hosting it on Github( https://loveyourtrip.tk/ ), if I want to access https://loveyourtrip.tk/user , GitHub throws error status code 404.
However, I can log on https://loveyourtrip.tk/ . once I log on this URL, there is a button called "mange account". if you click there , you can see user. once clicked on user , you can go to https://loveyourtrip.tk/user. but I am not able to access it directly. How can I resolve this issue?

It's because you didn't handle the /user in the backend.
You can handle the whole thing from the front end by using HashRouter instead of BrowserRouter.
Or you can handle it from the backend by return the html page to all the routes.
Take a look at this https://stackblitz.com/edit/hashrouter-demo

Related

Nuxt.js Facebook Login appending '#_=_' to uri

I see plenty of others have had issues with facebook appending this to the callback uri and saw some good solutions for handling this client side with js embedded in the page. I have a nodejs api that handles the actual authorization with passportjs and passes it to our frontend (nuxtjs based on vue 2). The client stalls when trying to access/redirect any routes after being sent to the uri with the appended
I was hoping I could fix it with
//dashboard.vue
mount(){
if (window.location.hash == "#_=_"){
window.location.hash = ''
}
}
but this doesn't seem to fix anything with the router. I also tried adding a redirect to the vue router
//.nuxt/router.js
{ path: "/dashboard#_=_", redirect: "/dashboard" }
but the vue router dynamically generates on runtime so anything I hard-code there gets undone.
From what I undestand this is strictly a client side problem, but maybe I'm missing some parameter in the Facebook API call that could prevent this?
//backend api calling fb api
app.get('/facebook', passport.authenticate('facebook')) //not specifying scope since still in dev and haven't applied for approval

Reloading or refreshing page removes authorization in vue.js

I'm using social authentication using the vue-google-oauth2 library. It works fine as I am able to authenticate my self and I receive a token from the backend too.
When initially I log in, and by using a function that is part of the vue-google-oauth2 library that I'm using to check if it says that I'm authorized or not, it gives the following response in my browser's console:
this.$gAuth.isAuthorized
true
When I then refresh my browser page, and since I've placed a debugger command in my code, and I print the same function again,
I get the following response:
this.$gAuth.isAuthorized
false
What can I do to ensure that switching tabs, reloading page or refreshing it won't make this happen? Or is this what is actually supposed to be happening?
Have you looked at saving it in as session data? Im not to familiar how Angular state works, but when you set original state you can look for the session key "authorized" and if it doesnt exist set auth to false, if it exists set it to the value.
localstorage.getItem(item)
and
localstorage.setItem(item)
There is also the option of making a component that handles the google auth and sends it to the state.
From the library documentation for vue-google-oauth page you linked it says you need to send that code back to your backend server to create a token to stay signed in, so it's behaving as expected. From here (https://www.npmjs.com/package/vue-google-oauth2#usage---getting-authorization-code) it states :
The authCode that is being returned is the one-time code that you can
send to your backend server, so that the server can exchange for its
own access_token and refresh_token
In other words, you need to do something with that code to make it persist in your app, otherwise it's just a one-time code, so looks to be expected.

Getting the 'base' url Angular 5

I'm not sure if I have used the right terminology here but Is there a way I can get the base URL of my app?
My problem Is I have a login service that has a hardcoded redirectUrl now when I'm in development, I'm obviously using http://localhost:4200 but when I've published I'm using my website name https://mywebsite.com now Is there a way I can grab that and not anything after so like If I go to https://mywebsite.com/thisadad I only get back https://mywebsite.com?
Now I know I could have a function on the ngOnit of my app.component where I grab the URL on first load pass it to a service and then use it throughout the app but that wont work If I say enter the page at https://mywebsite.com/newpage is there a better way to do this??
The reason I'm using a hardcoded redirect is because I'm using auth0 as my authetication
Any help would be appreciated
If i understand the situation currently,
In your case you should use a global variable named
'environment'.
Which you configure during build ( ng build )
More on this in this article:
https://medium.com/beautiful-angular/angular-2-and-environment-variables-59c57ba643be

Routing in VUE.js

So I have a routes.js file to handle my routing in my VUE app and I have used it to transition between components successfully using a router-link tag. However I would now like to execute routes using javascript. For example after I receive an authentication response from my server I would like to transition from the login page to my home page. What can I do to execute a route when I want to?
You can programmatically route using router.push('home'). Here is a a reference to see more options available.

Why the conflicting variables?

I'm getting conflicting results between the facebook javascript SDK and the python requesthandler variables. The Javascript SDK says my user is not logged in, which is correct, while my template variable that comes from the base request handler says that my user is logged in and displays the name of the user. Is there enough info to tell what is wrong or should I paste the code I think is relevant here? A link to the login page that has the error is here. The example I used is called the runwithfriends demo app from facebook and everything with that app worked except using the logic from the app just from a website without requiring the user to be in the iframe of the app.
Plus I can't seem to get the real-time API working. I can only save userID and not refresh user data - why? I have the code but I'm not sure what's most relevant but here's some of the request handler, the relevant code is basically exactly the same as the one from the demo app:
def render(self, name, **data):
logging.debug('render')
"""Render a template"""
if not data:
logging.debug('no data')
data = {}
data[u'js_conf'] = json.dumps({
u'appId': facebookconf.FACEBOOK_APP_ID,
u'canvasName': facebookconf.FACEBOOK_CANVAS_NAME,
u'userIdOnServer': self.user.id if self.user else None,
})
data[u'logged_in_user'] = self.user #variable that is the problem
data[u'message'] = self.get_message()
data[u'csrf_token'] = self.csrf_token
data[u'canvas_name'] = facebookconf.FACEBOOK_CANVAS_NAME
self.response.out.write(template.render(
os.path.join(
os.path.dirname(__file__), 'templates', name + '.html'),
data))
And even more strange, I can also get the application in a state where the javascript SDK says the user is logged in and the template variable logged_in_user says otherwise. Why are the variables conflicting?
Update: Here are screenshots from the strange login flow. I can go to my page and my name from facebook appears:
Then when I go to next page it also looks alright and has my name
But if I log out then I gets in impossible state: my name + logged out
How can I resolve this strange conflict between js and back-end?
Update: Since I only have this problem for one of my apps I can take what works from my other app and integrate. This page seems to work from my other app: http://cyberfaze.appspot.com/file/20985
Your 'user' is probably referring to the Django user not the Facebook user. Make sure you synchronize the two accounts correctly using a custom authentication backend. It's possible that the accounts get out of sync i.e. if the user switches browsers.
Keep in mind that the Facebook Python SDK will stop working after October 1st unless they update it to Oauth2.0 which is unlikely.
I just updated django-facebook-graph to work with the new authentication flow.

Categories