#Convex auth

5 messages · Page 1 of 1 (latest)

grave pagoda May 15, 2025, 9:01 PM

I have integrated convex auth with expo in react native. It currently works with email otp, apple sign in, and google sign in.
I want to remove the signup step for simplifying onboarding, I was thinking on using convex auth anonymous provider, and somehow locally save the session it in the user device.
Give me the steps I should follow to implement this new provider

brazen stormBOT May 15, 2025, 9:01 PM

Hi @grave pagoda. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

Implementing Anonymous Authentication with Convex Auth in Expo

You can implement anonymous authentication with Convex Auth in your Expo React Native app by following these steps:

Step 1: Configure the Anonymous Provider

First, add the Anonymous provider to your Convex Auth configuration:

// convex/auth.ts
import { Anonymous } from "@convex-dev/auth/providers/Anonymous";
import { convexAuth } from "@convex-dev/auth/server";

export const { auth, signIn, signOut, store, isAuthenticated } = convexAuth({
  providers: [
    Anonymous,
    // Keep your existing providers
  ],
});

Step 2: Set up Token Storage for React Native

Since you're using React Native, you'll need to implement a custom storage solution as mentioned in the documentation:

// Create a storage adapter for React Native
import * as SecureStore from 'expo-secure-store';

const secureStorage = {
  getItem: async (key: string) => {
    return await SecureStore.getItemAsync(key);
  },
  setItem: async (key: string, value: string) => {
    await SecureStore.setItemAsync(key, value);
  },
  removeItem: async (key: string) => {
    await SecureStore.deleteItemAsync(key);
  }
};

Step 3: Update your ConvexAuthProvider

Update your ConvexAuthProvider to use the secure storage:

import { ConvexAuthProvider } from "@convex-dev/auth/react";

function App() {
  return (
    <ConvexAuthProvider 
      client={convex} 
      storage={secureStorage}
      storageNamespace="your-app-namespace">
      {/* Your app components */}
    </ConvexAuthProvider>
  );
}

Step 4: Implement Anonymous Sign-in

Add the anonymous sign-in functionality to your app:

import { useAuthActions } from "@convex-dev/auth/react";

function OnboardingScreen() {
const { signIn } = useAuthActions();

const handleAnonymousSignIn = async () => {
try {
await signIn("anonymous");
// Navigate to your main app screen
} catch (error) {
console.error("Anonymous sign-in failed:", error);
}
};

// Call handleAnonymousSignIn when the app starts or when a user skips sign-up

return (
// Your onboarding UI
);
}


## Step 5: Handling Session Persistence

The session will be automatically persisted in the secure storage you configured. When the app restarts, the ConvexAuthProvider will attempt to restore the session.

## Step 6: Upgrading Anonymous Users Later

If you want to allow anonymous users to upgrade to full accounts later, you'll need to implement custom account linking. This is a more advanced topic, but the general approach would be:

1. Store the anonymous user ID in your database
2. When the user decides to create a full account, use that ID to link the accounts
3. Move all user data from the anonymous account to the new account

For this upgrade path, you might need to implement a custom solution as mentioned in the Discord discussions about upgrading anonymous accounts to real accounts [Link to Discord thread](<https://discord.com/channels/1019350475847499849/1366162915035447416>).

## Additional Considerations

- Remember that anonymous users' data will be lost if they clear app data or uninstall the app unless you implement a way to recover it.
- Consider adding a way for users to easily convert their anonymous account to a permanent one later.
- You may want to add logic to check if a user already has a session before offering sign-in options.

This implementation will allow users to start using your app immediately without signing up, while still maintaining the option to create a full account later.

I hope this helps with your implementation!