descope/vue-sdk

Type issues in Descope component

arvi-nagaraj opened this issue · 9 comments

arvi-nagaraj commented

Issue:

I am working on a product UI that uses Descope for authentication. While integrating with vue-sdk, I am getting type check issues.

Descope component has just flowId as required prop. But tsc compiler expects other props and throws when they are not being passed.

descope-vue-test-app % npm run tsc-check

> descope-vue-test-app@0.0.0 tsc-check
> vue-tsc --noEmit

src/App.vue:18:8 - error TS2345: Argument of type '{ flowId: any; onError: any; }' is not assignable to parameter of type '{ name: string; props: { flowId: { type: StringConstructor; required: boolean; }; tenant: { type: StringConstructor; }; theme: { type: StringConstructor; }; debug: { ...; }; telemetryKey: { ...; }; redirectUrl: { ...; }; autoFocus: { ...; }; }; emits: string[]; setup(_: unknown, { emit }: SetupContext): { ...; }; } ...'.
  Type '{ flowId: any; onError: any; }' is missing the following properties from type '{ name: string; props: { flowId: { type: StringConstructor; required: boolean; }; tenant: { type: StringConstructor; }; theme: { type: StringConstructor; }; debug: { ...; }; telemetryKey: { ...; }; redirectUrl: { ...; }; autoFocus: { ...; }; }; emits: string[]; setup(_: unknown, { emit }: SetupContext): { ...; }; }': name, props, emits, setup

<Descope v-if="!isAuthenticated" :flow-id="flowId" @error="handleError" />

Please help if something is wrong on my end.

Reproduction:

Created a sample repo: https://github.com/arvi-nagaraj/descope-vue

Steps: Run npm install and npm run tsc-check (Need to add project id in .env file)

nirgur commented

Hi @arvi-nagaraj
Thanks for reaching out

the parameter name should be flowId and not flow-id
Did you see it on one of our examples?

arvi-nagaraj commented

Hi @nirgur, the type error occurs even with flowId

dorsha commented

@arvi-nagaraj it should be flowId.
Can you sure your code snippet of using the Descope component?

arvi-nagaraj commented

@dorsha I am still getting the same error even after updating flowId prop.
You can observe the error if you clone and run tsc-check on my sample repo: https://github.com/arvi-nagaraj/descope-vue

https://github.com/arvi-nagaraj/descope-vue/blob/main/src/App.vue

nirgur commented

@arvi-nagaraj the repo is not accessible
Please make it public so we can see your code

Meanwhile, you can try to follow the example app and see how the Descope component is being used
https://github.com/descope/vue-sdk/blob/main/example/components/Login.vue

image
arvi-nagaraj commented

@nirgur Sorry for the confusion. Updated repo visibility to public. thanks for the reference, followed the exact way from the examples - that doesnt resolve the error.

  • 👍1
nirgur commented

@arvi-nagaraj I found the problem and opened a PR that fixes it
it should be merged an published soon

  • 👍1
nirgur commented

@arvi-nagaraj
version 1.0.1 was released including the fix

  • 🎉2
arvi-nagaraj commented

@nirgur/@dorsha Thank you so much for the quick resolution.

  • 👍1