Flutter For Web Cookie/Token Sessions and Authentcation

Question

I am working on a full stack app using NodeJS and Flutter For Web, at the moment i don't understand how to make safe cookie/token sessions.
The answer i need is how to make an authentication system with Flutter For Web like other Social Networks or Stackoverflow itself.

Answer 1

Importing dart.html directly doesn't support from flutter 1.9 : Reference

I came across the package universal_html while digging in for the solution, and its working fine for me. Below is my helper class to store key-value pair locally on web:

import 'package:universal_html/prefer_universal/html.dart';

class WebStorage {

  //Singleton
  WebStorage._internal();
  static final WebStorage instance = WebStorage._internal();
  factory WebStorage() {
    return instance;
  }

  String get sessionId => window.localStorage['SessionId'];
  set sessionId(String sid) => (sid == null) ? window.localStorage.remove('SessionId') : window.localStorage['SessionId'] = sid;
}

To read,

WebStorage.instance.sessionId;

To write,

WebStorage.instance.sessionId = 'YOUR_CREDENTIAL';

Example:

fetchPost(params, "CMD_USERREGISTRATION").then((result) {
        ...
        APIResponse response = APIResponse(xmlString: result.body);

        if (!response.isSuccess()) {
          ...
          return;
        }
        var sid = response.getSessionId();

        if (kIsWeb) {
          WebStorage.instance.sessionId = sid;
        }
}

main.dart:

@override
  Widget build(BuildContext context) {
    if (kIsWeb) {
      isLogin = WebStorage.instance.sessionId != null;
    } else {
      isLogin = //check from SharedPreferences;
    }
    return isLogin ? dashboardPage() : loginPage();
  }

UPDATE:

shared_preferences now support web from the version 0.5.6. See also shared_preferences_web

Answer 2

This is an old question but the chosen answer is not totally safe. Using web storage for sensitive information is not safe, for the web.

You should use http-only cookies. Http-only cookies cannot be read via Javascript but the browser automatically sends it to the backend.

Here is example of Nodejs-Express-TypeScript Code;

In this example there two cookies one is http-only, the other one is not. The non-http-only cookie is for checking logged-in situation, if it's valid client assumes the user is logged in. But the actual control is done by the backend.

PS: There is no need to store or send any token, because browser handles it (cookies) automatically.

const cookieConfig = {
  httpOnly: true,
  secure,
  maxAge: 30 * 24 * 60 * 60 * 1000,
  signed: secure,
}

const cookieConfigReadable = {
  httpOnly: false,
  secure,
  maxAge: 30 * 24 * 60 * 60 * 1000,
  signed: secure,
}

function signToken(unsignedToken: any) {
  const token = jwt.sign(unsignedToken, privatekey, {
    algorithm: 'HS256',
    expiresIn: jwtExpirySeconds,
  })

  return token
}

const tokenObj = {
  UID: userId,
  SID: sessionId,
}

const token = signToken(tokenObj)

// sets session info to the http-only cookie
res.cookie('HSINF', token, cookieConfig) 

// sets a cookie with expires=false value for client side check.
res.cookie('expired', false, cookieConfigReadable) 

But in this approach there is a challenge during debugging, because NodeJS and Flutter Web serves on different ports, you should allow CORS for dev environment.

if (process.env.NODE_ENV === 'dev') {
  app.use(
    cors({
      origin: [
        'http://localhost:8080',
        'http://127.0.0.1:8080',
      ],
      credentials: true,
    }),
  )
}

And in Flutter Web you cannot use http.get or http.post directly during debugging, because flutter disables CORS cookies by default.

Here is a workaround for this.

// withCredentials = true is the magic
var client = BrowserClient()..withCredentials = true;
http.Response response;
try {
  response = await client.get(
    Uri.parse(url),
    headers: allHeaders,
  );
} finally {
  client.close();
}

Also in debugging there is another challenge; many browsers does not allow cookies for localhost, you should use 127.0.0.1 instead. However Flutter Web only runs for certain url and certain port, so here is my VsCode configuration for Flutter to run on 127.0.0.1

 {
      "name": "project",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "args": [
        "-d",
        "chrome",
        "--web-port",
        "8080",
        "--web-hostname",
        "127.0.0.1"
      ]
    }

These were for setting and transferring cookie, below you can find my backend cookie check

const httpOnlyCookie = req.signedCookies.HSINF
const normalCookie = req.signedCookies.expired

if (httpOnlyCookie && normalCookie === 'false') {
  token = httpOnlyCookie
}

if (token) {
  let decoded: any = null
  try {
    decoded = jwt.verify(token, privatekey)
  } catch (ex) {
    Logger.error(null, ex.message)
  }

  if (decoded) {
    //Cookie is valid, get user with the session id
  }
}

Answer 3

You can encrypt it as you want then use getStorage to store it & it supports all platforms, example:

GetStorage box = GetStorage();

write it:

box.write('jwt', 'value');

read it:

if (box.hasData('jwt')) {
  box.read('jwt');
}