MyFam is a beautiful, focused photo viewer that connects to your Microsoft OneDrive account to display photos that have been shared with you by family and friends. It organizes photos by the person who shared them, creating an intimate, distraction-free way to browse memories.
- Real Microsoft Authentication - Uses MSAL.js for secure OAuth2 authentication
- OneDrive Integration - Fetches photos shared with you via Microsoft Graph API
- Organized by Person - Automatically groups photos by who shared them
- Chronological Gallery - Photos sorted by date taken, newest first
- Fullscreen Viewer - Beautiful lightbox for viewing photos with keyboard navigation
- No Social Features - Deliberately excludes likes, comments, and other distractions
- A Microsoft account (personal or work/school)
- OneDrive with photos shared by others
- Access to Azure Portal (free)
-
Launch the App
- Open the app in your browser
- You'll see the Setup Wizard automatically
-
Complete the 4-Step Setup Wizard
Step 1: Create Azure App Registration
- Click the link to open Azure Portal
- Create a new app registration named "MyFam"
- Select "Accounts in any organizational directory and personal Microsoft accounts"
- Choose "Single-page application (SPA)" as the platform
- Copy the redirect URI shown in the wizard
- Click "Register"
Step 2: Configure Authentication
- Navigate to "Authentication" in the left sidebar
- Enable "Access tokens" and "ID tokens" under implicit grant
- Save
Step 3: Set API Permissions
- Navigate to "API permissions"
- Add these Microsoft Graph delegated permissions:
User.Read- Read user profileFiles.Read- Read user filesFiles.Read.All- Read shared files
- Click "Add permissions"
Step 4: Enter Your Client ID
- Navigate to "Overview"
- Copy the "Application (client) ID"
- Paste it into the wizard
- Click "Complete Setup"
-
Sign In
- Click "Sign in with Microsoft"
- Choose your Microsoft account
- Grant permissions when prompted
- Your shared photos will load automatically
MyFam is designed to be:
- Intimate - Like a family photo album, not a social feed
- Effortless - Simple navigation, minimal cognitive load
- Focused - Only photos matter, no other distractions
- Secure Authentication: Uses industry-standard OAuth2 with PKCE flow
- No Server: All authentication happens client-side in your browser
- Local Storage Only: Your Client ID and tokens are stored locally
- No Data Collection: We don't collect, store, or share your data
- Direct API Access: Communicates directly with Microsoft Graph API
- Framework: React 19 with TypeScript
- Authentication: @azure/msal-browser (MSAL.js)
- API: Microsoft Graph API v1.0
- Styling: Tailwind CSS with shadcn/ui components
- State Management: React hooks + Spark KV for persistence
If you need to change your Azure app registration:
- Click "Sign Out"
- Clear your browser's localStorage
- Refresh the page
- The setup wizard will appear again
Alternatively, you can update the myfam_client_id value directly in your browser's developer tools (Application → Local Storage).
- Verify your Client ID is correctly entered
- Check that the redirect URI in Azure matches your app's URL exactly
- Try clearing browser cache and localStorage
- Ensure you have photos shared with you in OneDrive
- Check that API permissions were granted in Azure AD
- Try signing out and signing in again
- Verify the redirect URI is registered as a "Single-page application (SPA)"
- Check that implicit flow tokens are enabled in Authentication settings
- Disable browser extensions that might block Microsoft domains
- Allow popups for this site in your browser settings
- MSAL uses popups for authentication flows
This project is licensed under the MIT License.
- Built with Microsoft Authentication Library (MSAL)
- UI components from shadcn/ui
- Icons from Phosphor Icons
- Fonts: Bricolage Grotesque and Inter (Google Fonts)