auth-provider

Implements a React auth provider with login, register, and logout against ABP TokenAuth endpoints.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/AryanMohanlall/SafeGuard --skill auth-provider-aryanmohanlall
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: auth-provider
Source: https://github.com/AryanMohanlall/SafeGuard/tree/main/.agents/skills/auth-provider
Command: npx skills add https://github.com/AryanMohanlall/SafeGuard --skill auth-provider-aryanmohanlall

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires redux-actions, react, axios.

What problem does it solve? Building authentication state management in a Next.js/React frontend against an ABP (ASP.NET Boilerplate) backend requires handling a non-standard login endpoint shape, token persistence, and consistent provider composition — this Skill provides the complete, working pattern. ## Core Features & Use Cases - Full Auth Provider Scaffold: Generates context, actions, reducer, and provider component files using redux-actions with typed state for login, register, and logout flows. - ABP Endpoint Integration: Handles the /api/TokenAuth/Authenticate endpoint with its specific field names (userNameOrEmailAddress, rememberClient) and auto-login after registration. - Provider Composition Guidance: Enforces AuthProvider as the outermost wrapper in the app's provider tree and verifies root layout integration. - Use Case: When scaffolding a new Next.js app backed by ABP, use this Skill to generate the entire auth state layer and wire it into the provider composition correctly. ## Quick Start Ask the AI to build the auth provider with login, register, and logout pages wired to the ABP TokenAuth endpoint.

Frequently Asked Questions about auth-provider

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build an auth provider in React with redux-actions?▼

Create four files: context.tsx defining state and action interfaces, actions.tsx with createAction calls for pending/success/error states, reducer.tsx using handleActions, and index.tsx exposing the provider component plus useAuthState and useAuthAction hooks.

How to call the ABP TokenAuth Authenticate endpoint from React?▼

POST to /api/TokenAuth/Authenticate with userNameOrEmailAddress, password, and rememberClient fields. The response contains accessToken, expireInSeconds, and userId, which you persist via a cookie helper and dispatch into auth state.

Does ABP login use email or username in the request body?▼

ABP expects the field userNameOrEmailAddress, not email. Sending email instead causes authentication to fail, so the login function must map the input to the exact ABP field name.

Where should AuthProvider sit in the React provider tree?▼

AuthProvider must be the outermost wrapper, above theme, query, and domain providers, since other providers may depend on authentication state. It is composed in a central AppProviders file referenced by the root layout.

Why does auto-login after registration fail in ABP apps?▼

Registration via /api/services/app/Account/Register does not return a token, so you must call the login function afterward with the registered username and password. Skipping this step leaves the user unauthenticated despite successful registration.