Laravel : Get id from localstorage - javascript

I have an application using for backend Laravel and in frontend React.
In React, to retrieve the data of the logged user I use :
const user = JSON.parse(localStorage.getItem("userData"));
In laravel's web.php to get the logged user_id I use Auth::user()->id.
Since I'm using React for authentification and Laravel to serve the APIs, I can't use Auth::user()->id directly to read the logged user's id in JS.
I understand that I can't pass directly localstorage as it's something stored locally in the browser. I tried setting a token for the logged user using Laravel Passport and it's working. But how to retrieve the data of the logged user in web.php or a Controller ?

You can use Laravel Sanctum. Doc
In Laravel Sanctum your application use session & cookies instead of tokens for user authentication. So you can retrieve user data anywhere you want.

Related

MIcrosoft Teams Custom App store accessToken

I made a Microsoft Teams Custom App, I've already get the accessToken from my external api that athenticate the user.
My problem is: how I can I save the received accessToken into Teams context? If I can't do this, how can I pass it from my tab to my messageExtension?
Thanks.
finally I decided to use Table Storage for save and get the received accessToken.

How to handle API credentials in an Angular app?

I created an API in Laravel and I have a small SPA in Angular that logins in the app via an username & password and receive a token. With this token you can do some basic stuff with the API.
It's not ok to save the credentials (user&pass) in the Angular app (plain text - javascript etc etc). How can I handle this kind of auth in Javascript? What is a best practice?
After login, You can return the token and store in a localstorage for future use and refresh, and if you don't want put your token in every ajax call manually you can add to $http like:
$http.defaults.headers.common['Authorization'] = 'Bearer ' + storage.token;
I have tried this with angularjs and laravel with this library:
https://github.com/tymondesigns/jwt-auth

save user session in localstorage in React server side application

In my app I want to save the user session_id in local storage. My app is written with React and Redux ( With server side rendering ). I fetch user session_id from Api. I want to save session_id while user is logged in to my app ?
How is the best solution for this ?
Can you share the code you currently have to understand your question a little better. From what I understood you want to maybe try the code below. In the else statement make the api request for the session id and then setItem with the session id that came from the api request. You will then have access to it with a variable called currentSessionId.
var currentSessionId;
if(localStorage.getItem('session_id')){
currentSessionId = localStorage.getItem('session_id');
} else {
localStorage.setItem('session_id','<session id>');
currentSessionId = localStorage.getItem('session_id');
}
Hope this helps!
Just save the session_id to local storage when you receive it from the server. Then in your application initialization file check if the local storage contains any session_id. If so, use that id to fetch user data.
As local storage is client side (browser) feature, you can't use it in backend.
Another option could be to save your session_id into cookie and read that cookie in server side. That way you could authenticate the user already in server side.

How to create users in Django's backend database when using Vue.js and Auth0 for frontend authentication

I am trying to use Vue.js as a frontend, and Django as the backend for an SPA.
In the frontend, I am leveraging Auth0 for user authentication and I want to send the id_token obtained from user registration/creation from Auth0 to the backend to create specific user profiles in real-time.
How do I create user profiles on my django backend for every user when they register using Auth0 on vue.js on the frontend?
Previously, I was using the following code to enable profile creation once a user is created:
# Whenever a User account is created, it creates a profile for it too.
def create_profile(sender, **kwargs):
user = kwargs["instance"]
if kwargs["created"]:
user_profile = UserProfile(user=user)
user_profile.save()
post_save.connect(create_profile, sender=User)
def __str__(self):
return self.user.username
In simpler terms, this is what I am trying to achieve:
- User registers on the website
- Account is created by leveraging Auth0
- user_id from Auth0 is fetched and sent to the backend (Django) from the frontend (Vue.js)
- Django creates a user profile for the registered user in its backend postgresql database.
- User is now able to access his profile page http://website/profile once logged in. (Data for the profile is fetched from Django)
I am fairly new to Vue.js and Javascript. Although Vue.js is a breeze to use, but I can't seem to figure out how to replicate similar functionality in Vue.js with Auth0.
Any help/guidance/pointers in the right direction are appreciated.
Thanks.
You want to make Ajax calls - I recommend Axios - to communicate between your client and server sides. It's pretty straightforward, I've been using it with Vue.js & love it.
Something like:
in auth.vue:
axios.post('/yourUserRoute', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
If you make sure that you call this axios call every time you want to register a new user, your back-end will receive the correct informations for you to proceed on your server. I never touched Django so I'm not going to try and help you on the details, but this should give you a good start to work with!

How to redirect the user to a new url with sending some data along in express?

[NODE, express] I am making facebook application, where after the user gives the facebook access , facebook redirects the user to my site with a code.
assume it to be
abc.com/heyBuddy/fb/callback?code="adasdasdasda"
In this route i.e router.get('/heyBuddy/fb/callback', funcion(req,res)) , i take the facebook code and do all the necessary computations on the server side, and i can render that data in a html file to the client using res.render.
But i dont want to render on the same url, i.e 'abc.com/heyBuddy/fb/callback' , I want to get the the user code on this url , do the computations and send that data to another url, i.e abc.com/heybuddy/fbApp and render from there, and so that the user sees the url = abc.com/heybuddy/fbApp.
I tried redirecting, but I was not able to send the computed data along so that i can render that data there.
Can anyone help, how can i got about this.
Sounds like you're reimplementing what is already existing with Passport.js and it's Facebook OAuth extension:
http://passportjs.org/
https://github.com/jaredhanson/passport-facebook
Try This :
function(req, res) {
// Successful authentication, redirect home.
res.redirect('/'); }

Categories