Using Azure ADB2C and MSAL, is it possible to refresh the bearer token without re-entering the password?

Current situation

I have an ADB2C server with these settings:

  • A custom User Attribute InstancesAvailable was created
  • This user attribute is set to be returned as an Application claims in in my “Sign up and sign in (Recommended)” user flow
  • An API connector is defined to be executed “Before including application claims in token (preview)” in the user flow
  • My API endpoint defined to be called from the API connector is returning an extension_InstancesAvailable property, to be added as a claims in the bearer token produced by the Identity server

All of that is working, the typical use case is:

  1. A user signs in to my React web app using MSAL and the above user flow defined in ADB2C
  2. During the sign-in process, my API endpoint is thus called for constructing and returning the custom extension_InstancesAvailable claims value to be added by the Identity server
  3. Once the user gets signed into my application, his bearer token correctly includes the extension_InstancesAvailable claims value

Question

I am thinking forward: There will be an action available in my web application to “add a new instance”. Since the list of available instances is forged into the bearer token during the sign-in, is there a way to “regenerate” the bearer token of a user, without having to sign-out/sign-in or even re-enter password?

Ideally, I would like to regenerate the bearer token after a specific action is done inside my web app, so the extension_InstancesAvailable contains the correct list, including the one just created by the user.

I don’t understand how to use Puppeteer JSHandle at all

I’ve read all the other questions about JSHandle, but I still don’t get it.

I know how to get a scalar value from a webpage into my puppeteer script:

const myHandle = await page.$('.foo');
const myValue = await myHandle.evaluate(node => node.innerHTML);

I’ve even got this to return… something:

const myHandle = await page.$('.foo');
const mySomething = await myHandle.evaluate(node => node.childNodes);

But how do I iterate over mySomething the same as if I was in the browser console, for example if .foo contains some <img> tags, how would I fetch the src from all those and end up with an array?

Weird querySelector interaction (not clicking)

Basically, I have this piece of code:

    if (this.variantId || theme.config.mqlSmall) {
      this.addEventListener('click', this.onHoverHandler.bind(this));
      this.querySelector('a').addEventListener('click', (event) => {
        event.preventDefault();
        console.log("hello")
      });
    }

That should triggers when a color selector get’s clicked. It is adding the event listener into my color selector, but it’s not triggering :S I’m a little confused about this, never happened to me

This is the structure of my color swatch (this)

Also this is when my event is loaded

I want it to trigger the function when I click on it

How to display user input data in chart using next.js and chart.js?

I am working on a school project using Next.js, Firebase, and Chart.js. My goal is to create a Doughnut chart using Chart.js that displays the category name and total amount spent for each category. The application allows users to input their spending and income data, which is then directed to a transactions page. On this page, the transactions are split up into categories, and users can view each spending or income item by clicking on the category name. Link to Vercel for better understanding: Clarity (finance-tracker-beta-beige.vercel.app). Link to GitHub Repo aswell: LiamMarrie/finance-tracker: Web Development 2 Project (github.com)

I have been trying to figure out how to display the information on the chart for the past few hours, but nothing seems to be working. I have tried passing information from file to file, as well as storing the data in a JSON file, but I have not been successful. I would really appreciate it if someone could help me understand what I am doing wrong or guide me in the right direction. Thank you so much in advance!

PS. Please don’t bully the styling and stuff. I’m still new to this, and CSS makes me want to hit my head against the table.

React Mui “Converting circular structure to JSON” error

I’m having “Converting circular structure to JSON” error in my app. Couldn’t find any solution. It happens when clicking any button (or any “clickable” element) from Mui. It happens not only with modal, but even if I create MuiButton element without any function calls on click. If I use standart it works. I’ve found couple of tickets from people facing same or similar error, but still no solution. Please, share any ideas?

const Header = ()=>{
    const [isOpenAuth, setIsOpenAuth] = useState(false);
    const [isOpenRegister, setIsOpenRegister] = useState(false);
    return <div>
        <header className="header">
            <Wrapper>
                <img src={logo} className="logo" alt="logo" />
                
                {/*<Button variant="outlined" onClick={() => setIsOpenAuth(true)} className="header-controls">Войти</Button>*/}
                {/*<Button variant="outlined" onClick={() => setIsOpenRegister(true)} className="header-controls">Регистрация</Button>*/}
                <button onClick={() => setIsOpenAuth(true)}>Войти</button>
                <button onClick={() => setIsOpenRegister(true)}>Регистрация</button>
            </Wrapper>
        </header>

        <Modal handleClose={() => setIsOpenAuth(false)} isOpen={isOpenAuth}>
            <AuthModal/>
        </Modal>
        <Modal handleClose={() => setIsOpenRegister(false)} isOpen={isOpenRegister}>
            <RegisterModal/>
        </Modal>
    </div>
}

Here is the error text:

Uncaught (in promise) TypeError: Converting circular structure to JSON
–> starting at object with constructor ‘Object’
— property ‘__emotion_real’ closes the circle

Why is this specific m4a audio file not playing on the component, but any other one will?

I was building an audio playback component when I noticed that my .m4a audio file was refusing to be played, for some reason. At first, I thought it had to do with the library I was using, Amplitudejs, but then I tried using a barebone HTML page and an <audio> tag to see if it works. It doesn’t.

Oddly enough, using any other audio file works, including other .m4a files even from the same S3 bucket, uploaded in the same way. Does anyone know what’s going on and why is my audio not playing?

here’s my audio: https://deepscribes.s3.eu-central-1.amazonaws.com/uploads/1701605406836Transcription-test+ENG.m4a

And here’s one that works: https://filesamples.com/samples/audio/m4a/Symphony%20No.6%20(1st%20movement).m4a

My audio (doesn’t work):

<!-- It doesn't work -->
<audio controls muted src="https://deepscribes.s3.eu-central-1.amazonaws.com/uploads/1701605406836Transcription-test+ENG.m4a" />

The other audio (works)

<audio controls src="https://filesamples.com/samples/audio/m4a/Symphony%20No.6%20(1st%20movement).m4a" />

How do I install JSchan and how do I code it?

I’m making a imageboard that’s related to Deviantart and digital art using jschan, but how do I install JSchan? and how do I code with instructions?

I’ve never made a imageboard before and I’ve never code before, but what are some instructions for me to install JSchan and coding?

Heroku scheduler command not found

I have a node js project at heroku
And it work fine.
I want to make specific function that run on scheduler (every sunday and wensday)
The problem is:
I use heroku scheduler
And set the command
Node createLottery.js
But in the log of heroku i get
Command not found
Just to make sure in my terminal its working
So the problem is only with the heroku scheduler

enter image description here

Server not connecting to website, post and get transaction problem

Trying to run https://github.com/techinfo-youtube/Expense-Management-System-MERN-STACK-Project/tree/06-final-code-with-css
downloaded all dependencies it was working before now I can’t seem to connect to me database
Getting on inspection

api/v1/users/register:1 
        
        
       Failed to load resource: the server responded with a status of 404 (Not Found)

I Have connected it to mongoose via .env file but post and get transaction request are’nt working!!

I know this maybe a bit vague but we can’t seem to figure out the trouble at all, I consulated 2 SDE 2 developers as well.

Why is the first column in all the rows in my 2d array being given the same value?

I am using javascript to populate an array when the page is loaded (every cell gets the value ‘False’) and then I use another javascript function to put the value ‘True’ in a cell when someone clicks on the radio button the table cell. When the Submit button is pressed, the first column of every row has the value ‘True’. I don’t know why this is happening.

Here is the code I am using:

This gets run when the page is loaded:

function Start() {   
      for (let i = 1; i < 11; i++) {
          for (let j = 1; j < 10; j++) {
      arr[i,j]="False" 
          }
      }
    }

This gets run when someone clicks the radio button in the cell of the table on the page:

function myFunction(x,y) {
          arr[x,y]="True";
       }

What is very strange is if I check the value of say arr[2,1] before arr[x,y]=”True” in myFunction, it shows “False”, but if I check it after arr[x,y]=”True”, it shows “True”!! It’s not just row 2, it shows “True” for the first column for all the rows!

Can someone please tell me what I am doing wrong?

get props passed to component inside getServerSideProps

In Next.js, let’s assume we have this component:

<MyComponent width=150 />

Inside this component, I know how to fetch data inside getServerSideProps

export const getServerSideProps: GetServerSideProps = async (context) => {
    const data = await fetchData() as DataInterface;
    
    return { props: { data: data } }
}

Inside the main function of the component, I also know how to get access to the fetched data props.

export default function MyComponent( {data}: InferGetServerSidePropsType<typeof getServerSideProps>) { etc...

Now, in the context of this component, how can I also access the “width” prop passed to the MyComponent component?

Thanks

Run function in the same JavaScript file as a worker

I’m working on a browser JavaScript project that requires multi-threading for efficiency. I understand web workers are the only possible way to achieve this. I’ve taken a look but have ran into limitations with the way workers work by default, and would like to know the most optimal way to address them.

var worker = new Worker("myscript.js")

There are two problems. First I don’t want my worker to be a different js file, I want it to just run a locally defined function… this wouldn’t be a big deal if it weren’t for the second issue: The stupidly excessive security systems of most browsers throw an error similar to CORS when using a local JS file, Firefox thinks index.html is trying to illegally access the content of the worker script… my project is meant to work when unpacked and ran locally in addition to being hosted online, I specifically design them to not require hosting on a web server just for basic functionality to work.

So far I found partial answers that suggest you can achieve this using a blob. They are however very convoluted, in that they show how to create a blob for type text / JavaScript but not how to put my locally defined function into it. Thus my question is: How do I do what I’ve exemplified below in a single JS file, in the simplest form that’s unlikely to ever trigger any browser security limitations even when the project is ran locally?

function worker_func() {
    console.log("Works!")
}

var blob = new Blob()
blob.load_as_text(worker_func)
var url = URL.createObjectURL(blob)
var worker = new Worker(url)

Extra info: The function ran by the worker is part of an instanced class that spawns it. It would thus be ideal to know how do this in a way that preserves this, eg: worker_func.bind(this) when done normally. I shouldn’t need to give the worker function any parameters if it knows how to access the class instance it’s related to.

Cannot update a component (`Router`) while rendering a different component (`NewProduct`) NextJs 14

This error appears when I want to create a new product:

'page.js' 

import { useRouter } from 'next/navigation'
import axios from 'axios'

export default function NewProduct() {
    const [title, setTitle] = useState('')
    const [description, setDescription] = useState('')
    const [price, setPrice] = useState('')
    const [goToProducts, setGoToProducts] = useState(false)
    const router = useRouter()


    async function createProduct(e) {
        e.preventDefault()
    const data = {title, description, price};
    await axios.post('/api/products', data)
    setGoToProducts(true)
    }


    if (goToProducts) {
      router.push('/products')
    }

I don’t know if I have done good products page in api folder:

/app/api/products/page.js, ( I tried route.js but still don’t work )

import { Product } from '../../../models/Product'
import { mongooseConnect } from '../../lib/mongoose'

export default async function handle(req, res) {
    const {method} = req;
    await mongooseConnect()

    if(method === 'POST') {
        const {title, description, price} = req.body;
       const productDoc = await Product.create({
            title, description, price,
        })
        res.json(productDoc)
    }
}

Cannot update a component (Router) while rendering a different component (NewProduct). To locate the bad setState() call inside NewProduct, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Thank you!

How to convert the code into pure js code?

I tried to write a code for reverse a array. Initially my react application in strict mode and i got the output as,
let Number =[1,2,3,4,5,6]
initial Array is 654321
Reverse array is 123456
which is wrong.
But after removing strict mode i got answer which expected as below.
initial Array is 123456
Reverse array is 654321
after searching i come to know that, “React’s StrictMode feature intentionally double-invokes some functions, like the component constructor
, to help developers find potential problems in their code. This includes accidentally impure code, such as code that modifies state or side effects.To avoid this issue, developers should ensure that their code is pure, meaning that it does not modify state or have side effects”.
So can anyone plz help me to make below code as pure js code

const printArray = (arr, size) => {
let arr1 = [];
for (let i = 0; i < size; i++) {
arr1.push(arr[i]);
 }
 return arr1;
};

const reverseArray = (arr, first, last) => {
let arr3 = [];
while (first < last) {
let temp = arr[first];
arr[first] = arr[last];
arr[last] = temp;
first++;
last--;
}
arr3.push(arr);
return arr3;
};

let number = [1, 2, 3, 4, 5, 6];
let size = number.length;

function Test() {
 return (
  <div style={{ margin: "200px" }}>
  <div>initial Array is {printArray(number, size)}</div>
  Reverse array is {reverseArray(number, 0, size - 1)}
  </div>
  );
  }