Auth0ContextInterface has incorrect interface typing

[nairb774]

Checklist

• The issue can be reproduced in the react-native-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

Some of the types on Auth0ContextInterface don't seem to match the implementation as well as the examples. This is triggering lint messages for https://typescript-eslint.io/rules/unbound-method/ when used following examples.

Take getCredentials as an example:

react-native-auth0/src/hooks/Auth0Context.ts

Lines 75 to 80 in 92b3637

	getCredentials(
	scope?: string,
	minTtl?: number,
	parameters?: Record<string, unknown>,
	forceRefresh?: boolean
	): Promise<Credentials>;

The way that function's type is written implies that getCredentials is a member of a class that makes use of this internally. Because of that, writing code like const { getCredentials } = useAuth0(); getCredentials(); will fail because the this parameter isn't being set properly. Example of where that lint would fail:

react-native-auth0/example/src/screens/hooks/Api.tsx

Line 15 in 92b3637

const { user, getCredentials } = useAuth0();

Contrast that with the type for clearCredentials:

react-native-auth0/src/hooks/Auth0Context.ts

Line 89 in 92b3637

clearCredentials: () => Promise<void>;

That is saying that the property is a function which doesn't need a bound this and will work with a destructuring assignment.

Looking at the implementation, many of the properties of the Auth0ContextInterface interface likely should be written similar to clearCredentials. In the case of getCredentials it would likely look something like the following. Note the : after the name and the change to => in the type specification:

getCredentials: (
  scope?: string,
  minTtl?: number,
  parameters?: Record<string, unknown>,
  forceRefresh?: boolean
) => Promise<Credentials>;

Reproduction

• Configure typescript-eslint (8.44.1) with the referenced lint enabled with the default settings.
• Run over the linter over the examples in the repo.

Additional context

No response

react-native-auth0 version

5.0.0-beta.6

React Native version

0.79.2

Expo version

53.0.22

Platform

iOS

Platform version(s)

All

[subhankarmaiti]

Hi @nairb774,
Thanks for bringing this up.
To help us debug the issue further, could you please share a few details:
Is this issue specifically related to the linter?
Is it observed with any particular version typescript-eslint (8.44.1)?

[nairb774]

Is this issue specifically related to the linter?

Bear with me as the response is a little nuanced. The linter was calling out that the way in which we were making use of the getCredentials function is incorrect based on the type of the function. Specifically, the following pattern is being flagged as problematic:

const { getCredentials } = useAuth0();
/*...*/
getCredentials(/*...*/); // NOTE: `this` is `undefined`

The type for getCredentials, as written, specifies that this should be bound to an instance. Specifically, the linter is saying that the following is how to call getCredentials:

const auth0 = useAuth0();
/*...*/
auth0.getCredentials(/*...*/); // NOTE: `this` is bound to the `auth0` instance.

Thankfully, getCredentials doesn't actually use this, so there is no behavioral differences between the two versions.

The only reason I'm pointing this out is that the examples in this repository are often of the first form. It seems like the intention is to encourage and allow the first form. To make the examples and the types consistent, the way in which the type of getCredentials is written should change slightly.

Is it observed with any particular version typescript-eslint (8.44.1)?

8.44.1 is the version that we were using when I first discovered the error. I've not attempted to bisect the version to see if the behavior has changed.

---

I whipped together a branch which demonstrates the issue at hand: https://github.com/nairb774/react-native-auth0/tree/typescript-eslint-example

cd react-native-auth0/example
yarn eslint src/screens/hooks/Api.tsx

react-native-auth0/example/src/screens/hooks/Api.tsx
  15:17  error  A method that is not declared with `this: void` may cause unintentional scoping of `this` when separated from its object.
Consider using an arrow function or explicitly `.bind()`ing the method to avoid calling the method with an unintended `this` value.
If a function does not access `this`, it can be annotated with `this: void`  @typescript-eslint/unbound-method

See the commit message for more details: nairb774@0d93dd3

[nairb774]

@subhankarmaiti let me know if anything is unclear or if you need anything else.

[subhankarmaiti]

Hi @nairb774,
Thank you for the detailed explanation. Please give us some time to investigate this so we can provide the best possible solution.