LWC component is not storing values in screen flow

Question

I have a LWC which stores the URL Parameters in local storage [this works]

I wanted to retrieve the values on a specific screen flow. Using a display text function I tried to see the values if they were retrieved or not, apparently they are "null".

In the flow I have added the LWC component and based on its properties I have created the variables as "available for output" and used this syntax to display "{!var_FirstName}" where it is showing null

What am I Missing here? Can you please check and let me know

JS

import { LightningElement, api } from 'lwc';

export default class RetrieveParams extends LightningElement {
    @api language;
    @api varFirstName;

connectedCallback() {
    // Retrieve parameters from local storage
    this.language = localStorage.getItem('language');
    this.varFirstName = localStorage.getItem('var_FirstName');

    // Dispatch event to pass the parameters to the flow
    this.dispatchEvent(new CustomEvent('parametersready', {
        detail: {
            language: this.language,
            varFirstName: this.varFirstName
        }


       }));
    }
}

HTML

<template>
    
</template>

Meta XML

    <?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"
                          fqn="retrieveParams">
    <apiVersion>56.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="language" type="String" label="Language"/>
            <property name="varFirstName" type="String" label="First Name"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Answer 1

@api properties are read-only except during class initialization, so you cannot initialize them in connectedCallback(). You should be able to do this:

@api language = localStorage.getItem('language');
@api varFirstName = localStorage.getItem('var_FirstName');

Alternatively, you might want to use a getter/setter pair to allow the value to change later:

#language;
@api set language(value) {
  this.#language = value;
  localStorage.setItem('language', value);
}
get language() {
  return this.#language || localStorage.getItem('language'))
}
#varFirstName;
@api set varFirstName(value) {
  this.#varFirstName = value;
  localStorage.setItem('varFirstName',value);
}
get varFirstName(value) {
  return this.#varFirstName || localStorage.getItem('varFirstName');
}

Note: a variable that starts with # is just one that cannot be accessed outside the class. These make a decent choice for private backing variables as demonstrated above.