TMS Auth

1.3.13 verified Fri May 01 auth: no javascript maintenance

TMS Auth is an authentication library for React/UMI applications, version 1.3.13. It provides hooks and components for handling authentication flows such as login, logout, and permission checks. Built specifically for UMI framework with seamless integration. It ships TypeScript definitions. Last update was several months ago; no known recent active development. Alternative: umi-plugin-auth for UMI-specific setups or generic react-auth-kit.

Common errors

error Error: useAuth must be used within an AuthProvider ↓

cause The useAuth hook is called outside of the AuthProvider context.

fix

Wrap your component tree with <AuthProvider> at the top level.

error Cannot find module 'tms-auth' or its corresponding type declarations. ↓

cause Missing package installation or TypeScript cannot resolve types.

fix

Run 'npm install tms-auth' and ensure tsconfig includes 'node_modules' in typeRoots.

error TypeError: login is not a function ↓

cause The useAuth hook returns an object without login because the provider is missing or misconfigured.

fix

Check that AuthProvider is rendered and passes config correctly.

error Error: Invalid tokenKey provided to AuthProvider ↓

cause The tokenKey config value is not a string or is undefined.

fix

Provide a valid string for tokenKey in AuthProvider config.

Warnings

gotcha The tokenKey config option changed from 'token' to 'my_app_token' default after v1.0.0. Existing apps may break if relying on old default. ↓

fix Set tokenKey explicitly in AuthProvider config to match your stored token key.

deprecated The withAuth HOC is deprecated in favor of useAuth hook. It may be removed in future versions. ↓

fix Replace withAuth with useAuth hook in functional components.

gotcha AuthProvider must be above any component using useAuth in the component tree; otherwise useAuth throws a runtime error. ↓

fix Ensure AuthProvider wraps the entire app or at least the components that need authentication.

breaking In v1.3.0, the logout function no longer calls a cleanup callback; it only clears the token. Code relying on the callback will break. ↓

fix Manually call cleanup logic after logout() if needed.

Install

npm install tms-auth

yarn add tms-auth

pnpm add tms-auth

Imports

useAuth
wrong
```
import useAuth from 'tms-auth';
```
correct
```
import { useAuth } from 'tms-auth';
```
The default export is not available; use named import.

withAuth

wrong

import { withAuth } from 'tms-auth/src';

correct

import { withAuth } from 'tms-auth';

Do not import from subpaths; only the main entry is supported.

AuthProvider

wrong

import AuthProvider from 'tms-auth';

correct

import { AuthProvider } from 'tms-auth';

AuthProvider is a named export, not default.

TMSAuth

wrong

import { TMSAuth } from 'tms-auth/TMSAuth';

correct

import { TMSAuth } from 'tms-auth';

TMSAuth is exported from the package root.

Quickstart

Shows minimal setup using AuthProvider and useAuth hook with a login button.

import { AuthProvider, useAuth } from 'tms-auth';
import React from 'react';

function LoginButton() {
  const { login } = useAuth();
  return (
    <button onClick={() => login({ username: 'user', password: 'pass' })}>
      Login
    </button>
  );
}

function App() {
  return (
    <AuthProvider config={{ tokenKey: 'my_app_token' }}>
      <LoginButton />
    </AuthProvider>
  );
}

export default App;