Step 1: Head over to the Supabase website and either create an account or log in if you already have one.

Step 2: Start a new project and jot down those API keys—they'll come in handy later.

Step 3: Go to the "Table Editor" section in your Supabase project and set up a new table called user_activities.

Step 4: Set up the schema for the user_activities table with these columns:

• id: UUID, Primary Key
• user_id: UUID, Foreign Key (linking to your users table)
• activity: VARCHAR (e.g., 'login', 'logout', 'view page')
• timestamp: TIMESTAMP (auto-set to current time)
• metadata: JSONB (to store extra info)

Step 5: Turn on Row Level Security (RLS) for the user_activities table to keep things secure.

Step 6: In the Supabase dashboard, go to the "API" settings to grab the anon and service_role keys.

Step 7: Install the Supabase client library in your app. If you're using npm, run this command:

npm install @supabase/supabase-js

Step 8: Set up the Supabase client in your app using the API URL and anon key:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'YOUR_SUPABASE_URL'
const supabaseKey = 'YOUR_ANON_KEY'
const supabase = createClient(supabaseUrl, supabaseKey)

Step 9: Create a function to log user activities:

async function logUserActivity(userId, activity, metadata = {}) {
    const { data, error } = await supabase
        .from('user_activities')
        .insert([
            {
                user_id: userId,
                activity: activity,
                timestamp: new Date(),
                metadata: metadata
            }
        ])
    if (error) {
        console.error('Error logging user activity:', error)
    } else {
        console.log('User activity logged:', data)
    }
}

Step 10: Call this function when different user actions happen. For example, when a user logs in:

// after successful login
const userId = 'USER_UUID'
logUserActivity(userId, 'login', { method: 'email' })

Step 11: Use logUserActivity for other actions like page views or logouts:

// on page view
logUserActivity(userId, 'view page', { page: '/dashboard' })

// on logout
logUserActivity(userId, 'logout')

Step 12: Create a function to fetch the logged user activities:

async function getUserActivities(userId) {
    const { data, error } = await supabase
        .from('user_activities')
        .select('*')
        .eq('user_id', userId)
        .order('timestamp', { ascending: false })

    if (error) {
        console.error('Error fetching user activities:', error)
    } else {
        console.log('User activities:', data)
    }
}

Step 13: Use this function in your app wherever you need it, like in the user profile activity tab:

getUserActivities('USER_UUID')
    .then(activities => {
        // handle/display activities
    })

Step 14: Set up Row Level Security (RLS) policies in Supabase for the user_activities table to make sure users can only see their own activity records:

CREATE POLICY "Allow users to view their own activity"
    ON "public"."user_activities"
    FOR SELECT
    USING (auth.uid() = user_id);

Step 15: Test the policies to make sure they work as expected, letting users fetch only their own activity data.