I have a logout function like this
public function logout() {
Auth::logout(); // logout user
return Redirect::to('login'); //redirect back to login
}
When logout function is triggered through routes which looks like
Route::get('logout', array(
'uses' => 'userController#logout'
));
user get redirected to the login page. But when goes back using browser, dashboard view gets opened which i don't want to. What can be the best way to prevent users from going back to dashboard once they logged out? Though there are some discussion on this topic, but didn't helped me.
Since you're using the Auth, you can utilise the existing Middleware to stop the back button putting them on dashboard.
Wrap the routes you want to protect with a Route::group
Route::group(['middleware' => 'auth'], function () {
Route::get('dashboard', function () {
// Uses Auth Middleware
});
});
Any attempt to access dashboard without login will put them back on the home page (default location in the middleware). Modify the middleware (found in app/Http/Middleware/Authenticate.php) to change the redirect url.
you need to add a middleware in your dashboard so that even if they press back the button they can go back to the page but can't do anything unless they login again.
Related
I currently have a service authentication up and running (using jwt to auth).
I'm working on a quiz service that force user to create some required information and force them to take a quiz to understand how to use our tool.
Because lacking of Frontend exp, I'm wondering how this quiz service will integrate with the auth service
Right now, for Backend side during auth service I will give them back the permission in the token if I call the function to check if the user pass the test & have a profile created. Otherwise I give them back the token with permission = []
But for the Frontend side, what is the solution to re-direct use to Quiz page (after sign-in and what about user that already log-in before)
check this documentation programatic navigation
once authenticated redirect the user back using [vue2 code]
this.$router.push({name:'Quiz',params:{id:this.$route.query.next})
In the authentication page you may pass the quiz link as next query parameter eg
example.com/login?next=< quizID >
Navigation guard documentation
You can use route guards to redirect unauthenticated users to the login page, do remember to pass the quiz id as a query parameter.
your guard will be similar to this
router.beforeEach((to, from, next) => {
if (to.name === 'Quiz' && !isAuthenticated) next({ name: 'Login', query: { next: to.params.quizID }})
else next()
})
This was assuming you have set your routes has a route named Quiz and takes :id and a route named login, similar to this.
{
path: '/quiz/:id',
name: 'Quiz',
.....
},
{
path: '/login',
name: 'Login',
......
},
Alternatively, you could have set up a dialog box on the quiz page that handles authication.
async handleSignInSignOutButtonClick() {
if (!this.isSignedIn) {
supabase.auth.signIn({ provider: "google" });
this.$store.commit("signIn", supabase.auth.session());
window.location.reload();
return;
}
await this.$store.commit("signOut");
supabase.auth.signOut();
window.location.reload();
},
The above function is triggered by a sign-in button, which is supposed to become a sign-out button and the icon of the user after logging in.
When The function fires, supabase redirects me to Google OAuth consent screen. However, after logging in and redirecting back to my app, the sign-in button stays there until I manually refresh the page.
What is wrong with my code...
There are a couple of things going on that you need to be aware of. For starters you are reloading your page when you don't need to in the handleSignInSignOutButtonClick() function.
When the authentication process begins, your app will be redirected to Google OAuth consent screen as you have discovered. Once the authentication is complete, you will be redirected back to your app and the reload occurs automatically.
The second point is that you can make use of the supabase.auth.onAuthStateChange() event to help you. My suggestion would be to listen for this event when you create your supabase client so it listens for the duration of your app instance. During that event handling, you can assign the user to the store (or anywhere you want to save the user data) based upon the state change. Your app can be reactive to state changes.
In your supabase client setup code:
const supabaseUrl = process.env.SUPABASE_URL // your supabaseUrl
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY // your supabaseKey
const supabase = createClient(supabaseUrl, supabaseAnonKey)
/**
* Set up the authentication state change listener
*
* #param {string} event The event indicates what state changed (SIGN_IN, SIGN_OUT etc)
* #param {object} session The session contains the current user session data or null if there is no user
*/
supabase.auth.onAuthStateChange((event, session) => {
const user = session?.user || null;
// Save your user to your desired location
$store.commit("user", user);
});
Now you have your user data being saved whenever the user logs in and a null being set for the user data when the user logs out. Plus any page refreshes are handled by the change state event listener or any other instance that might change the user state. For example, you could have other login or logout buttons and the single listener would pick them up.
Next is to deal with the actual process of logging in or out. In your component Vue file (from your example):
async handleSignInSignOutButtonClick() {
if ($store.state.user === null) {
await supabase.auth.signIn(
{ provider: "google" },
{ redirectTo: "where_to_go_on_login" }))
} else {
await supabase.auth.signOut()
$router.push("your_logged_out_page")
}
}
Finally for your button change state to indicate logged in or logged out, you can simply observe the store user state.
<button v-if="user">Sign Out</button>
<button v-else>Sign In</button>
This way your button will update whenever the user state changes. The user state changes whenever a user logs in or out, and your code is much more compact and readable.
Once final observation that you may already be doing anyway. I would recommend that you put all of your authentication code into a single file and expose the log in and log out functions for your app use as an export to use in component files. This way everything to do with login and logout is handled in a single location and this code is abstracted away from the component file. If you ever wanted to switch from Supabase you could easily update one or two files and everything else would just keep working.
I have an nuxt.js app that a user can log in to. Whenever the user is authenticated using the nuxt/auth module. I want the app to fetch some data using the nuxtServerInit.
Currently I have this in my nuxtServerInit:
export const actions = {
async nuxtServerInit({ dispatch }) {
if (this.$auth.loggedIn) {
await dispatch('products/getProducts')
...
}
}
}
This works well if I'm authenticated and the page is refreshed. The problem seems to be whenever I'm redirected after authentication, these actions are never called, thus not populating the store.
I have tried to use the fetch method instead, but in only works on the page with the fetch statement, not every page in my application. Also I don't want the http calls to be made with every page change.
I have a login page and I need to go to my home page after successful login. That login functionality login to a ldap server and send a response whether the authentication is success or not. I don't want that to keep in localstorage since this app has only two pages. login and home. When login success it should redirect to home page, if not it should redirect to again to the login page.
And please the console.log in the browser, "inside auth guard true" prints thousands times..
The only code I have in my app.component.html is <router-outlet></router-outlet>
In the canActivate(), all you need to do is return true or false. When you are redirecting it to home from inside the function you are entering into an infinite loop.
This is because on redirecting to home the canActivate() gets called and its expects a boolean return value. If the value is false, it won't load the component.
canActivate() {
if (this.authService.loggedIn) {
console.log('Inside Auth Gaurd');
return true;
}
console.log('auth gaurd false path');
return false;
}
For more detail on canActivate() refer this
I've followed this tutorial for authentication and it works:
http://www.playframework.com/documentation/2.2.x/JavaGuide4
But I was wondering if there was another way to do it so that the user can't just go to myapp.com/login and get the login screen even if they're already logged in. Is there a way to do this so I can go to the login screen but still have myapp.com as the route?
This is easy. Just have the controller method for route "/" display the login page instead of your landing page when the user is not logged in.
Say / routes to Application.index() and it has a function isLoggedIn() to check login status, you could do something like this:
public static index() {
if (isLoggedIn()) {
return ok (index.render());
}
else {
return ok (login.render());
}
}