DEV Community: Nutan Mishra

Fixing GitHub Authentication Error: "erase operation not supported" and "Invalid username or token"

Nutan Mishra — Wed, 03 Sep 2025 11:00:07 +0000

This guide addresses the GitHub CLI (gh) error gh auth git-credential: "erase" operation not supported and the related remote: Invalid username or token error when using Git with HTTPS.

Why This Happens

The GitHub CLI (gh) is set as your Git credential helper but doesn't support the "erase" operation Git sometimes uses.
GitHub no longer allows password authentication for Git operations (since August 2021). You need a personal access token (PAT) or SSH.
Stale or invalid credentials (e.g., expired PAT) cause the "invalid username or token" error.

Step 1: Check Your Setup

Run these commands to diagnose:

gh auth status
git config --get credential.helper
git remote -v

gh auth status: Shows your GitHub CLI login status and protocol (HTTPS/SSH).
git config --get credential.helper: If it shows !gh auth git-credential, that's likely causing the "erase" issue.
git remote -v: Confirms if you're using HTTPS (https://github.com/...) or SSH (git@github.com:...).

Fix 1: Refresh GitHub CLI Authentication (For HTTPS)

Refresh your auth:

   gh auth refresh -h github.com

Follow the browser prompts to re-authenticate.

If that fails, log out and back in:

   gh auth logout
   gh auth login

Choose GitHub.com and HTTPS.
Authenticate via browser or token.
Agree to set up the Git credential helper.

Set up Git credential helper explicitly:

   gh auth setup-git

Test with:

   git push

Tip: Update GitHub CLI (gh version) to 2.40+ if issues persist. Reinstall from cli.github.com.

Fix 2: Use a Personal Access Token (PAT) Directly (For HTTPS)

Generate a PAT:
- Go to GitHub > Settings > Developer settings > Personal access tokens > Tokens (classic) > Generate new token.
- Name it (e.g., "Git Access").
- Select scopes: repo (required), workflow (for Actions).
- Copy the token.
Update your remote URL:

   git remote set-url origin https://<YOUR_TOKEN>@github.com/YOUR_USERNAME/YOUR_REPO.git

Or cache the PAT:
- Windows: Credential Manager > Windows Credentials > Add git:https://github.com with username and PAT.
- macOS: Keychain Access > Add/update github.com password.
- Linux: Run git config --global credential.helper store, then git push and enter username/PAT once.
Test with git push.

Fix 3: Switch to SSH (Recommended for Long-Term)

Generate an SSH key:

   ssh-keygen -t ed25519 -C "your_email@example.com"

Press Enter for defaults; add a passphrase (optional).

Start SSH agent and add key:

   eval "$(ssh-agent -s)"
   ssh-add ~/.ssh/id_ed25519

Add public key to GitHub:
- Copy: cat ~/.ssh/id_ed25519.pub
- GitHub > Settings > SSH and GPG keys > New SSH key > Paste and save.
Update remote to SSH:

   git remote set-url origin git@github.com:YOUR_USERNAME/YOUR_REPO.git

Test SSH:

   ssh -T git@github.com

Should say "Hi YOUR_USERNAME! You've successfully authenticated..."

Test with git push.

Troubleshooting

Expired PAT? Check GitHub > Settings > Developer settings > Personal access tokens. Regenerate if needed.
2FA Enabled? Passwords won't work—use PAT or SSH.
Wrong Remote? Verify with git remote -v. Fix with git remote set-url.
Clear Cached Creds:
- Windows: Credential Manager > Remove GitHub entries.
- macOS: Keychain Access > Delete github.com entries.
- Linux: git credential-cache exit or edit ~/.git-credentials.
Enterprise GitHub? Use --hostname yourcompany.com with gh commands.
Debug: Run GIT_TRACE=1 git push for detailed logs.

Redux Thunk vs Redux Saga: Deep Dive into Middleware for Async Redux Logic

Nutan Mishra — Thu, 26 Jun 2025 11:02:08 +0000

Introduction

Managing asynchronous operations like API calls, delays, or background tasks is a core requirement in Redux-based applications. Redux is synchronous by design, so to handle these side effects, we use middleware.

Among the most widely used are:

Redux Thunk: function-based middleware, straightforward for small-scale needs.
Redux Saga: generator-based middleware, powerful for complex async flows.

This post goes beyond the basics—offering in-depth technical insights, real-world examples, and guidance on selecting the right tool for your React+Redux stack.

Redux Middleware Refresher

Middleware in Redux provides a third-party extension point between dispatching an action and the moment it reaches the reducer. It allows us to intercept actions, perform side effects, and dispatch new actions.

const customMiddleware = store => next => action => {
  console.log('Dispatching:', action);
  return next(action); // pass action to reducer
};

Redux Thunk: Function-as-Action

How It Works

Redux Thunk allows action creators to return a function (instead of an object). This function can:

Access dispatch and getState
Execute side effects
Dispatch actions conditionally

Under the Hood

When Redux Thunk is applied as middleware, it checks the action:

function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === 'function'
      ? action(dispatch, getState)
      : next(action);
}

This mechanism enables async logic directly in your action creators.

Advanced Example (Dependent Dispatching)

export const fetchPostAndComments = (postId) => async (dispatch, getState) => {
  dispatch({ type: 'FETCH_POST_REQUEST' });
  const post = await fetch(`/api/posts/${postId}`).then(res => res.json());

  dispatch({ type: 'FETCH_POST_SUCCESS', payload: post });

  // Dispatch another dependent action
  dispatch(fetchComments(postId));
};

Redux Saga: Declarative Side Effects with Generators

How It Works

Redux Saga is powered by generator functions, enabling pausable and resumable execution. This allows for:

Managing race conditions
Task cancellation
Retrying failed operations
Orchestrating async control flows

Under the Hood

Sagas are “watchers” listening to dispatched actions. When triggered, they run worker sagas, yielding effects like call, put, take, fork.

Advanced Saga Example (Parallel + Debounce)

import { all, debounce, call, put } from 'redux-saga/effects';

function* searchWorker(action) {
  try {
    const results = yield call(api.search, action.payload.query);
    yield put({ type: 'SEARCH_SUCCESS', payload: results });
  } catch (err) {
    yield put({ type: 'SEARCH_ERROR', error: err.message });
  }
}

function* watchSearch() {
  yield debounce(500, 'SEARCH_REQUEST', searchWorker); // prevent API spam
}

function* rootSaga() {
  yield all([
    watchSearch(),
    // other watchers
  ]);
}

Here, debounce is used to delay search execution until the user stops typing—a feature difficult to achieve with Thunk.

Testing: Thunk vs Saga

Redux Thunk Testing (Straightforward)

import { fetchUser } from './userActions';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';

const mockStore = configureMockStore([thunk]);

test('fetchUser dispatches success', async () => {
  const store = mockStore({});
  await store.dispatch(fetchUser());
  const actions = store.getActions();
  expect(actions[0]).toEqual({ type: 'FETCH_USER_REQUEST' });
});

Redux Saga Testing (Deterministic)

import { fetchUser } from './sagas';
import { call, put } from 'redux-saga/effects';

test('fetchUser saga success path', () => {
  const gen = fetchUser();
  expect(gen.next().value).toEqual(call(fetch, '/api/user'));
  expect(gen.next({ json: () => ({ name: 'Alice' }) }).value)
    .toEqual(put({ type: 'FETCH_USER_SUCCESS', payload: { name: 'Alice' } }));
});

Sagas allow step-by-step deterministic testing, crucial for complex business logic.

Redux Thunk vs Redux Saga Comparison

Feature	Redux Thunk	Redux Saga
Async Syntax	Async/await, Promises	Generator functions (`yield`)
Complex Control Flows	Hard to manage	Built-in (debounce, throttle, retry, cancel)
Testability	Easy for simple logic	Great for advanced workflows
Boilerplate	Minimal	More verbose
Error Handling	Manual try/catch	Declarative (`try...catch`, effects)
Learning Curve	Low	Moderate to High
Community Support	Strong	Strong but smaller than Thunk
Integration with RTK	Built-in	Extra setup
Debugging Tools	Simple	Rich (Redux DevTools + Saga Monitor)

Real-World Architecture Use Cases

🔹 Use Redux Thunk When:

You're using Redux Toolkit, which includes Thunk by default
Your app is small-to-medium scale
Async operations are simple, like form submissions, basic API calls
You want to minimize boilerplate

🔹 Use Redux Saga When:

You're building enterprise-grade applications
Need flow orchestration, like:
- Retry API on failure
- Cancel previous requests on route change
- Wait for multiple actions to complete
You’re using WebSockets, background polling, or complex timers
You want testable, declarative async logic

Pro Tips for Choosing the Right Middleware

Prototype with Thunk — it's fast and simple.
If async grows, consider migrating to Saga for scalability.
Use Redux Toolkit's createAsyncThunk if you want structure without needing Saga.
For very large teams, Saga offers better separation of concerns and testability.
You can even consider RTK Query, a modern alternative that may remove the need for both.

Bonus: Redux Toolkit Integration

With Thunk (Built-in)

export const fetchUser = createAsyncThunk('user/fetch', async () => {
  const res = await fetch('/api/user');
  return res.json();
});

With Saga

Use redux-saga alongside Toolkit by manually running the saga middleware:

const sagaMiddleware = createSagaMiddleware();
const store = configureStore({
  reducer: rootReducer,
  middleware: [sagaMiddleware],
});
sagaMiddleware.run(rootSaga);

Conclusion

Redux Thunk and Redux Saga are both excellent middleware solutions—but designed for different complexity levels.

Use Case	Choose This
Rapid development	Redux Thunk
Few async operations	Redux Thunk
Rich, complex async flows	Redux Saga
Background tasks, WebSockets	Redux Saga

Final Tip:
If you're unsure, start with Thunk. If you hit complexity walls, migrate to Saga or use Redux Toolkit’s RTK Query.