I am trying to use the Nuxt Auth module and socialite for social logins. I have an API in Laravel 8 and a client in NuxtJS.
I am wondering if someone could tell me:
If my logic here is ok?
How to manually log user with nuxt auth (manually set token and user)?
So currently here is my flow for social logins:
Click on login with google makes an API call to my backend where I get redirect URL from socialite to google.
My frontend redirects me to the google login page, then back to my frontend app after I picked the account.
I send the google code to the backend to callback endpoint for socialite which then grabs me the google user. In same place after I deal with users in my app I am returning the token which I create by doing return $this->okResponse(['token' => $nativeUser->createToken('social-login')->accessToken]);
At this point I am back in my front end with the token which then I am trying to set this.$auth.setUserToken(response.data.token) which apparently does not equal logging the user in. So it looks like this:
mounted() {
this.$axios.get(`login/social/google/callback`, {params: {code: this.$route.query.code}}).then(response => {
console.log(response)
// this.$auth.strategy.token.set(response.data.token)
this.$auth.setUserToken(response.data.token)
if (this.$auth.loggedIn) {
console.log('I am logged in!')
} else {
console.log('I am NOT logged in!', this.$auth)
}
})
}
I am not logged in. Do I have to manually set loggedIn, 'User' and token? Or this is just madness? The only other thing I see here as a solution is my own custom strategy but this seems like total overkill.
Not sure if this is the best way but I ended up doing something like this.
mounted() {
this.$axios.get(`login/social/google/callback`, {params: {code: this.$route.query.code}}).then(response => {
this.$auth.setUserToken(response.data.token)
this.$auth.setUser(response.data.user)
if (this.$auth.loggedIn) {
console.log('I am logged in!')
} else {
console.log('I am NOT logged in!', this.$auth)
}
})
}
This seems to be working ok.
Related
Im trying to implement a simple sign-up and sign-in with next.js and supabase. i can create the user with the signup method and i can sign in the user with the signInWithPassword method. for some reason i cant seem to set the cookie with the jwt payload. even though that is wat is returned by the sign in method.
I dont want to use the auth helpers as explained here. https://supabase.com/docs/guides/auth/auth-helpers/nextjs
i want to do the auth serverside with nextjs api routes. im using supabase/js-v2
here is what i have.
try {
const { data, error } = await supaClientAnon.auth.signUp({
email,
password
});
if (error) {
res.status(422).json({ message: error.message });
return;
}
const sess = await supaClientAnon.auth.setSession(data?.session as Session);
return res.status(201).json({ message: 'Signed up!', data, sess });
} catch (error) {
res.status(500).json({ message: 'Something went wrong' });
return;
}
session wont get set. the setSession method supposedly sets the sesison with the session data returned from the signUp method as explained here https://supabase.com/docs/reference/javascript/auth-setsession
am i misunderstanding supabase auth fundamentally or forgetting something else?
I'm starting up a learning project with Laravel, VueJS. I'm using Sanctum cookie based.
I have got the authentication working with the help of several tutorials, but none of the tutorials covers the piece of checking if your session is expired or not. The tutorials that where covering it where using LocalStorage, and what I red about is that you should avoid LocalStorage.
I'm looking for a simple possibility to check if a user is still authenticated and if not, then redirect them to the login page, or even better, show a modal to login and go further where they are.
22 jan 2021 Still haven't got he answer :(
I'm fairly new to VueJS, Vuex and so on :)
Thanks for the help !
Try this, its what I've been using so far. Its not very ideal but works out fine so far until I can make it better.
Put this in App.vue created method
// each call needs csrf token to work, so we call this on app load once.
axios.get(axios.rootURL + '/sanctum/csrf-cookie').catch(() => {
alert('Something went wrong, Contact admin <br> ErrorCode: csrf')
})
// this part is not necessary, you may adapt as required
// let isLoggedIn = localStorage.getItem('isLoggedIn') ? true : false
// this.setIsLoggedIn(isLoggedIn)
axios.interceptors.request.use(
config => {
return config
},
error => {
return Promise.reject(error)
}
)
// this is the actual part you need, here we check on each call
// if we get error 401 which is unauthenticated we redirect to login. That's it
axios.interceptors.response.use(
response => {
return response
},
error => {
if (error.response.status === 401) {
this.$router.push({ name: 'login' })
localStorage.removeItem('isLoggedIn')
this.setIsLoggedIn(false)
}
return Promise.reject(error)
}
)
I've got a question regarding Laravel framework (vers. 5.2) and the authentication. I have 2 domains which represent a software. let's call them https://azure.mydomain.com and https://azuresoftware.mydomain.com.
The Laravel application is hosted on the domain https://azuresoftware.mydomain.com. https://azure.mydomain.com is just a CMS framework which is providing some information about the website.
Now I want to display different menus, if the user is logged in or not on https://azure.mydomain.com. I thought, I can do a fetch request to https://azuresoftware.mydomain.com/ and use the Laravel methods Auth::check() to check if the user is already logged in or not. I know that this is a CORS fetch request, but this is not the issue. I've allowed in the IIS webserver requests from https://azure.mydomain.com. The request works fine and also just a simple request. But actually Auth::check() is always returning false, even when I'm logged in on the software side.
This is my code so far:
<script>
fetch('https://azuresoftware.mydomain.com/checkLogin', {
method: 'GET',
headers: {
'Content-Type': 'text/plain'
}
})
.then(function(res) {
return res.json()
})
.then(function(data) {
if(data.isLoggedIn) {
// do some stuff...
}
else
{
// do some other stuff...
}
});
</script>
routes.php:
Route::group(['middleware' => 'web'], function () {
...
Route::get('checkLogin', function() {
return json_encode(['isLoggedIn'=>\Auth::check()]);
});
...
I'm sure, I forgot something essential, why it is not working this way.
This is due to the fact that AJAX calls only send cookies if the url you're calling is on the same domain as your calling script.
See Cross domain POST request is not sending cookie Ajax Jquery for more information.
I downloaded the example from GitHub to experiment with Azure AD B2C https://github.com/Azure-Samples/active-directory-b2c-dotnet-webapp-and-webapi
I have reconfigured this Web App for my AADB2C and all works well.
To also experiment with MSAL.js, I added a new page that implements the get access token for logged in user. User is logged in using server side code.
However, I was not able to get cached user session for the logged user as it seems MSAL.js dose not know the user already logged in from the server side code and vise-versa.
here is the code I used to get the logged user session and try to get token silently.
if (msalInstance.getAccount()) {
var tokenRequest = {
scopes: ["user.read", "mail.send"]
};
msalInstance.acquireTokenSilent(tokenRequest)
.then(response => {
// get access token from response
// response.accessToken
})
.catch(err => {
// could also check if err instance of InteractionRequiredAuthError if you can import the class.
if (err.name === "InteractionRequiredAuthError") {
return msalInstance.acquireTokenPopup(tokenRequest)
.then(response => {
// get access token from response
// response.accessToken
})
.catch(err => {
// handle error
});
}
});
} else {
// user is not logged in, you will need to log them in to acquire a token
}
the msalInstance.getAccount() function will always return null even the user has already logged in using the Microsoft.Identity Code (MSAL C# lib).
If anyone could if it is possible to get access token silently if the user is logged in using service side code.
Had the same issue.
Strangely the developers Msal.js have security concerns when your .js-application
adopts the session started in your .net-application. Although client side is not the right place to put that kind of security mechanism.
Here is where i found that info: related issue on github
You can adopt the .net-started session in your .js-application with msal.js by adding session id or login_hint to acquireTokenSilent(). More info can be found here: official msal.js documentation
My login form currently posts to itself on /
The post request is then picked up as follows...
app.post('/', userController.doLogin);
Then the controller is a follows..
exports.doLogin= function(req, res) {
Parse.User.logIn(req.body.username, req.body.password, {
success: function(user) {
console.log('login success');
res.render('loginSuccess');
},
error: function(user, error) {
console.log('login failed');
res.render('loginFailed');
}
});
}
This works correctly for a correct / incorrect login.
However, once logged in, the session is not stored no cookies are created / local storage etc..
Therefore when I test for login on one of my other routes it always displays as no-session, i am checking with the following code..
if(Parse.User.current()){
console.log('logged in and redirected');
res.redirect('/member/home');
}else{
console.log('not logged in, redirected to home/login page');
res.redirect('/');
}
Which always goes too home / again.
I read here https://parse.com/docs/hosting_guide#webapp-users that...
You just need to call Parse.User.logIn() in Cloud Code, and this middleware will automatically manage the user session for you.
Which would suggest it does the session for me?
Any help would be super useful! many thanks in advance!
Ok so after a lot of digging I have worked it out. First you need to add the module by doing the following..
var parseExpressCookieSession = require('parse-express-cookie-session');
Second you need to setup your own variables like this
app.use(express.cookieParser('YOUR_SIGNING_SECRET'));
app.use(parseExpressCookieSession({ cookie: { maxAge: 3600000 } }));
Third, you must do send the login/session all over HTTPS.
Boom, working - easy peasy when you know how.