Scribd
Upload
5 views3 pages

Tutorial10 - Authentication

The document outlines two activities for mobile programming involving user authentication and data management. The first activity focuses on creating an application that allows users to sign in with Google via Firebase and fetch GitHub repositories using TanStack Query. The second activity involves building a personal task management app with Firebase Email/Password authentication and CRUD operations using a mock API, also utilizing TanStack Query for data handling.

Uploaded by

unpnklng
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views3 pages

Tutorial10 - Authentication

The document outlines two activities for mobile programming involving user authentication and data management. The first activity focuses on creating an application that allows users to sign in with Google via Firebase and fetch GitHub repositories using TanStack Query. The second activity involves building a personal task management app with Firebase Email/Password authentication and CRUD operations using a mock API, also utilizing TanStack Query for data handling.

Uploaded by

unpnklng
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

MOBILE PROGRAMMING

Tutorial 10
Activity 01: Authenticated GitHub Repositories Dashboard

Build an application that allows users to sign in using their Google account (via
Firebase). Once authenticated, the app will use TanStack Query to fetch and
display a list of repositories from the GitHub API.

Objectives:

Firebase Auth: Implement GoogleAuthProvider.

TanStack Query: Manage data fetching, loading states, and error handling.

Target API: [Link]

Technical Requirements:

• Conditional Fetching: Only fetch the repository list once


onAuthStateChanged confirms the user is logged in.
• Unique Query Keys: Use the user's uid or email as part of the query key to
ensure the cache is account-specific.
• UX/UI: Display a Skeleton screen or a Spinner during the isLoading state.
• Session Cleanup: Implement a "Sign Out" function that triggers
[Link]() to wipe sensitive data from the cache.

Activity 02: Secure Personal "To-Do" Manager (Mock API)

In this activity, you will create a React Native application that implements
a personal task management app. You will use Firebase for Email/Password
authentication. After logging in, use TanStack Query to interact with the
JSONPlaceholder API to simulate real-world CRUD (Create, Read, Update,
Delete) operations.
Objectives:

Implement signInWithEmailAndPassword and


createUserWithEmailAndPassword.

TanStack Query: Use both useQuery (to fetch the list) and useMutation (to add
or delete tasks).

Target API:

• Fetch list: [Link] (Assume


each Firebase user maps to a specific userId on the mock API).
• Add task (Mutation): POST [Link]

Technical Requirements:

• Protected Routes: Prevent unauthenticated users from accessing the


Dashboard; redirect them to the Login page.
• State Synchronization: After a successful useMutation (adding a task), use
[Link] to automatically re-fetch the list without a
page reload.
• Global Error Handling: Use a Toast notification system to display errors if
Firebase authentication fails or the API returns an error.

You might also like