How to use Sessions with Flutter and Nestjs? - flutter

Question

I'm trying to keep users logged in with nestjs backend, when I use Postman the process works very smoothly, but with Flutter I don't know how to do it. I don't think that I actually understand how sessions work for mobiles, I tried looking for some proper explaining but I couldn't find anything so far.
Nestjs Code
#Controller('users')
#Serialize(UserDto)
export class UsersController {
constructor(
private usersService: UsersService,
private authService: AuthService,
) {}
#Get('/whoami')
#UseGuards(AuthGuard)
whoAmI(#currentUser() user: User) {
return user;
}
#Get()
getUsers(#Query('email') email: string) {
return this.usersService.find(email);
}
#Post('/signup')
async sendUser(#Body() body: UserDto, #Session() session: any) {
console.log(body);
const user = await this.authService.signup(body.email, body.password);
session.userId = user.id;
console.log(session.userId);
return user;
}
#Post('/signin')
async signin(#Body() body: UserDto, #Session() session: any) {
const user = await this.authService.signin(body.email, body.password);
session.userId = user.id;
console.log(session.userId);
return user;
}
#Post('/signout')
async signout(#Session() session: any) {
console.log(session.userId);
if (!session.userId) {
throw new NotFoundException('user not found');
}
session.userId = null;
}
}
Flutter Code
Future<void> signin(
String username, String password, BuildContext context) async {
try {
var url = 'https://example-app.herokuapp.com/users/signin';
var dio = Dio();
var response =
await dio.post(url, data: {'email': username, 'password': password}, options: Options(headers: {'Accept': 'application/json'}));
print(response.headers);
// response;
Navigator.of(context).pushNamed(CategoryDetailScreen.routeName);
} catch (err) {
print(err);
throw err;
}
}
Future<void> signout() async {
try {
var url = 'https://example-app.herokuapp.com/users/signout';
var dio = Dio();
var response = await dio.post(url,
options: Options(headers: {
'cookie':
'key'
}
)
);
print(response.headers);
response;
// return response;
} catch (err) {
print(err);
throw err;
}
}

Answer 1

Thanks to #RichardHeap 's comment I managed to solve my issue.
Check out session management with cookies:
Flutter http Maintain PHP session
I used FlutterSecureStorage package to store the incoming cookie and then decide which screen to show as a home screen using FutureBuilder as seen below:
I used these functions to write cookies and delete them from the device:
Future<void> signin(
String username, String password, BuildContext context) async {
try {
// String cookie = '';
var url = 'https://daleel-app.herokuapp.com/users/signin';
var storage = FlutterSecureStorage();
var dio = Dio();
var response =
await dio.post(url, data: {'email': username, 'password': password});
List<String>? cookies = response.headers['set-cookie'];
for (int i = 0; i <= cookies!.length - 1; i++) {
var cokIndex = cookies[i].indexOf(';');
var subCookies = cookies[i].substring(0, cokIndex + 1);
cookie += subCookies + ' ';
}
var subbedCookie = cookie.substring(0, cookie.length - 2);
print(subbedCookie);
storage.write(key: 'cookie', value: subbedCookie);
loggedIn = true;
// print(response.headers['set-cookie']);
// [express:sess=eyJ1c2VySWQiOjU1fQ==; path=/; httponly, express:sess.sig=Zy_Lc7kXM1BqZKIZRRt7ygpCTrM; path=/; httponly]
Navigator.of(context).pushNamed(CategoryDetailScreen.routeName);
} catch (err) {
print(err);
throw err;
}
}
Future<void> signout(BuildContext context) async {
try {
var url = 'https://daleel-app.herokuapp.com/users/signout';
var dio = Dio();
var fStorage = FlutterSecureStorage();
var header = await fStorage.read(key: 'cookie');
await dio.post(url, options: Options(headers: {'cookie': header}));
fStorage.delete(key: 'cookie');
Navigator.of(context).pushReplacementNamed(LoginScreen.routeName);
print('you reached here');
} catch (err) {
print(err);
throw err;
}
}
And here I used the FutureBuilder to decide which screen to show:
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
var cookie = FlutterSecureStorage().read(key: 'cookie');
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (ctx) => Places(),
),
ChangeNotifierProvider(
create: (ctx) => Offers(),
),
],
child: FutureBuilder(
future: cookie,
builder: (BuildContext context, AsyncSnapshot snapshot) => MaterialApp(
debugShowCheckedModeBanner: true,
title: 'Daleel',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: snapshot.hasData ? HomeScreen() : LoginScreen(),
routes: {
LoginScreen.routeName: (ctx) => LoginScreen(),
TestScreen3.routeName: (ctx) => TestScreen3(),
TestScreen2.routeName: (ctx) => TestScreen2(),
HomeScreen.routeName: (ctx) => HomeScreen(),
DetailsScreen.routeName: (ctx) => DetailsScreen(),
ExploreScreen.routeName: (ctx) => ExploreScreen(),
CategoryDetailScreen.routeName: (ctx) => CategoryDetailScreen(),
SearchDetailsScreen.routeName: (ctx) => SearchDetailsScreen(),
}),
),
);
}
}