How to add to login session

[vinstah]

Hi,

I have some requirements to add more checks to login which look to see if the user has been inactive for x time and if they are a type of user before setting session data, I couldn't wrap my head around which part of app/routes/resources+/login.tsx would be best to add this hook.

[future-leader1]

Hey there,

Absolutely, adding those checks to the login process is a good way to enhance security and user experience. In a typical web application, you would want to implement these checks in a way that's easy to manage and understand. Here's how you could approach it:

1. Identify the Inactive Time Check:
   Determine the threshold of inactivity time after which a user is considered inactive. For instance, if a user hasn't interacted with the application for 30 minutes, you might want to consider them inactive.

2. Identify the User Type Check:
   Decide on the criteria that define the "type" of user. This could be based on user roles, permissions, or any other relevant factors.

3. Location for the Checks:
   You mentioned app/routes/resources+/login.tsx, which seems to be the login route of your application. This is a good place to start. In this file, you can hook into the login process before setting session data.

4. Implementing the Checks:
   Inside your login.tsx file, look for the section where the user's credentials are validated and session data is set. This is usually where you would find an API call or a function responsible for logging the user in.

   Here's a simplified example using pseudo-code to give you an idea:

import React, { useState } from 'react';
import { loginApi } from './api';

const LoginPage = () => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

const handleLogin = async () => {
try {
if (userInactiveForXTime() && isTypeOfUser()) {
const response = await loginApi(username, password);
// Set session data and navigate to the next page
} else {
// Handle inactive user or incorrect user type scenario
}
} catch (error) {
// Handle login error
}
};

// ... rest of your component ...
};

export default LoginPage;

In this example, userInactiveForXTime() and isTypeOfUser() are functions you would implement to check if the user meets the conditions for logging in.

5. User Feedback:
   Make sure to provide appropriate feedback to the user if they're inactive for too long or if they don't have the correct user type. This could be done through error messages or notifications.

Remember, this is just a basic example to get you started. Your actual implementation might vary based on your specific application structure and requirements. The key is to integrate these checks seamlessly into your login process and ensure a smooth user experience.

Hope this helps! If you have more specific questions or need further assistance, feel free to ask.

[vinstah]

Thanks, @future-leader1 just the implementation I was thinking about,

To clarify app/routes/resources+/login.tsx is the login route that epic-stack uses but there are multiple places that commit the session and I just don't know which place in that file is best to update the session by maybe adding a few extra keys to the session when the user logs in.

I'm implementing multi-tenant to epic-stack but this login is quite abstract and hard to wrap my head around compared to the pseudo-code you provided.

Thanks for your help!

Edit: I think I am able to set Session parameters like this

epic-stack/app/routes/resources+/login.tsx

Line 193 in 6da9911

cookieSession.set(keyToSet, session.id)

[kentcdodds]

@vinstah if you're going to copy/paste an answer from ChatGPT, it's best to say that's what you're doing so people know.

[vinstah]

@kentcdodds Embarrassing, I hope your comment was a joke

[kentcdodds]

Sorry! That comment was intended for @future-leader1

[Mat-moran]

You can set instead a session.id whatever you want, for example a dictionary with the values you need.

export type SessionData = {
	session_id: string
	user_id: string
	user_company_id: string | null | undefined
}

export const authenticator = new Authenticator<SessionData>(sessionStorage, {
	sessionKey: 'sessionKeyName',
})

const SESSION_EXPIRATION_TIME = 1000 * 60 * 60 * 24 * 30

authenticator.use(
	new FormStrategy(async ({ form }) => {
		const email = form.get('email')
		const password = form.get('password')

		invariant(typeof email === 'string', 'username must be a string')
		invariant(email.length > 0, 'username must not be empty')

		invariant(typeof password === 'string', 'password must be a string')
		invariant(password.length > 0, 'password must not be empty')

		const user = await verifyLogin(email, password)
		if (!user) {
			throw new Error('Invalid email or password')
		}

		const session = await insertSession(getClientWithGlobals(user.id), {
			user_id: user.id,
			date: new Date(Date.now() + SESSION_EXPIRATION_TIME),
		})

		// here I am returning all this data in the session. The only limit is the storage limit of the cookie 4Kb I think 
                return {
			session_id: session.id,
			user_id: user.id,
			user_company_id: user.company_id,
		}
	}),
	FormStrategy.name,
)