# Social Login Extension - Shopify App

This is a Shopify app that provides social login functionality for multiple platforms including Google, Facebook, X (Twitter), Apple, LINE, Instagram, and TikTok. Built using the [Remix](https://remix.run) framework and integrated with Shopify's ecosystem.

## Features

- **Multi-Platform Social Login**: Support for 7 major social platforms
- **Shopify Integration**: Embedded app with proper authentication
- **Admin Management**: Settings page for configuring social login credentials
- **Local Storage**: Company and configuration data stored locally
- **Responsive Design**: Modern UI with Tailwind CSS

## Supported Social Platforms

- Google
- Facebook
- X (Twitter)
- Apple
- LINE
- Instagram
- TikTok

## Quick Start

### Prerequisites

Before you begin, you'll need the following:

1. **Node.js**: [Download and install](https://nodejs.org/en/download/) it if you haven't already.
2. **Shopify Partner Account**: [Create an account](https://partners.shopify.com/signup) if you don't have one.
3. **Test Store**: Set up either a [development store](https://help.shopify.com/en/partners/dashboard/development-stores#create-a-development-store) or a [Shopify Plus sandbox store](https://help.shopify.com/en/partners/dashboard/managing-stores/plus-sandbox-store) for testing your app.

### Setup

Using npm:

```shell
npm install
```

### Environment Configuration

Create a `.env` file in the root directory and configure the following variables:

#### Shopify App Configuration

```env
VITE_SHOPIFY_API_KEY=your_public_api_key
SHOPIFY_API_KEY=your_public_api_key
SHOPIFY_API_SECRET=your_private_api_secret
SCOPES=read_customers,write_customers,read_content,write_content
HOST=https://your-app-url
```

This app requests read and write access to customers and store content (for metafields) by default; no additional scope configuration is required.

#### Social Platform Configuration

**重要**: ソーシャルログインの設定は環境変数ではなく、アプリの管理画面で行います。各ソーシャルプラットフォームの認証情報は、Shopifyストアのメタフィールドに保存されます。

管理画面での設定方法：
1. アプリをインストール後、管理画面（`/app`）にアクセス
2. 設定ページ（`/app/settings`）に移動し、各ソーシャルプラットフォームの設定項目に必要な認証情報を入力
3. 設定は自動的にShopifyストアのメタフィールド（`store.social_login_json`）に保存され、テーマに挿入したスニペットから利用されます

#### API Configuration (Optional)

If the backend runs on a different origin:

```env
VITE_API_BASE_URL=http://localhost:3001
```

### Local Development

Start the development server:

```shell
npm run dev
```

Press P to open the URL to your app. Once you click install, you can start development.

### Theme Integration

After saving your settings in the admin page, add the social login to your storefront login page using the theme customizer:

1. In the Shopify admin, go to **Online Store > Themes > Customize**.
2. At the top of the page, click the template selector (where it shows "Homepage") and select **Customer login**.
3. In the left sidebar, click **Add section** → **Apps** and add the **Login App Block**.
4. Adjust the text and display settings as needed, then publish your changes.

> **Note:** If your store has **new customer accounts** enabled, Shopify renders the login page itself and the theme customizer approach may not work. Switch to **classic customer accounts** or use a Customer Account extension.

> **注意:** ストアで「新しい顧客アカウント」が有効になっている場合、Shopifyが提供するログインページが使用されるため、テーマカスタマイザーでの設定が機能しない可能性があります。**クラシック顧客アカウント**に切り替えるか、Customer Account拡張を利用してください。

#### Customizing the app block

- The app block can be customized through the theme customizer interface.
- Text and display settings can be adjusted directly in the Shopify admin without code changes.

### Building for Production

```shell
npm run build
```

## Application Structure

### Routes

- `/` - Main application entry point
- `/social` - Social login interface
- `/app` - Instructions page for snippet integration
- `/app/settings` - Admin settings page (requires authentication)

### Key Components

- **LoginPage**: Main social login interface
- **AuthorizationScreen**: OAuth permission screen
- **SettingsPage**: Admin configuration panel
- **AdminPage**: Snippet integration instructions

### Data Storage

The application uses local storage for:
- Company information
- Social platform configurations
- Admin authentication tokens

## Social Platform Setup

### Google OAuth

1. Go to [Google Cloud Console](https://console.cloud.google.com/)
2. Create a new project or select existing one
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add your domain to authorized origins

### Facebook Login

1. Go to [Facebook Developers](https://developers.facebook.com/)
2. Create a new app
3. Add Facebook Login product
4. Configure OAuth redirect URIs

### LINE Login

1. Go to [LINE Developers Console](https://developers.line.biz/)
2. Create a new provider and channel
3. Configure LIFF app settings
4. Set callback URLs

### Apple Sign In

1. Go to [Apple Developer Console](https://developer.apple.com/)
2. Create a new App ID with Sign In with Apple capability
3. Create a Services ID
4. Configure domains and redirect URLs

### Instagram Login

1. Go to [Facebook Developers](https://developers.facebook.com/)
2. Create an Instagram Basic Display app
3. Configure OAuth redirect URIs
4. Add `instagram-callback.html` to whitelist

### X (Twitter) Login

1. Go to [Twitter Developer Portal](https://developer.twitter.com/)
2. Create a new app
3. Enable OAuth 2.0
4. Configure callback URLs
5. Add `twitter-callback.html` to authorized redirects

### TikTok Login

1. Go to [TikTok for Developers](https://developers.tiktok.com/)
2. Create a new app
3. Configure OAuth settings
4. Set redirect URIs

## Admin Management

Access the admin panel at `/app` after installing the app. From there, go to `/app/settings` to manage the configuration. The settings page allows you to:

- Configure social platform credentials for each supported platform
- Enable/disable specific platforms
- Set redirect URIs for OAuth flows
- All settings are automatically saved to Shopify store metafields (`store.social_login_json`)

### Supported Platform Configuration

Each social platform requires specific credentials:

- **Google**: Client ID
- **Facebook**: App ID, App Secret
- **X (Twitter)**: App ID, Client ID, Client Secret
- **Apple**: Client ID
- **LINE**: LIFF ID, Channel ID, Channel Secret
- **Instagram**: App ID, App Secret
- **TikTok**: Client Key, Client Secret

## Deployment

### Hosting

When you're ready to set up your app in production, you can follow [our deployment documentation](https://shopify.dev/docs/apps/deployment/web) to host your app on a cloud provider like [Heroku](https://www.heroku.com/) or [Fly.io](https://fly.io/).

When you reach the step for [setting up environment variables](https://shopify.dev/docs/apps/deployment/web#set-env-vars), you also need to set the variable `NODE_ENV=production`.

### Hosting on Vercel

Using the Vercel Preset is recommended when hosting your Shopify Remix app on Vercel. You'll also want to ensure imports that would normally come from `@remix-run/node` are imported from `@vercel/remix` instead. Learn more about hosting Remix apps on Vercel [here](https://vercel.com/docs/frameworks/remix).

```diff
// vite.config.ts
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig, type UserConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
+ import { vercelPreset } from '@vercel/remix/vite';

installGlobals();

export default defineConfig({
  plugins: [
    remix({
      ignoredRouteFiles: ["**/.*"],
+     presets: [vercelPreset()],
    }),
    tsconfigPaths(),
  ],
});
```

## Troubleshooting

### Database tables don't exist

### Navigating/redirecting breaks an embedded app

Embedded Shopify apps must maintain the user session, which can be tricky inside an iFrame. To avoid issues:

1. Use `Link` from `@remix-run/react` or `@shopify/polaris`. Do not use `<a>`.
2. Use the `redirect` helper returned from `authenticate.admin`. Do not use `redirect` from `@remix-run/node`
3. Use `useSubmit` or `<Form/>` from `@remix-run/react`. Do not use a lowercase `<form/>`.

This only applies if your app is embedded, which it will be by default.

### OAuth goes into a loop when I change my app's scopes

If you change your app's scopes and authentication goes into a loop and fails with a message from Shopify that it tried too many times, you might have forgotten to update your scopes with Shopify.
To do that, you can run the `deploy` CLI command.

```shell
npm run deploy
```

### Social Login Not Working

1. Verify all environment variables are set correctly
2. Check that redirect URIs are properly configured in each platform's developer console
3. Ensure the app is running on HTTPS in production
4. Check browser console for any JavaScript errors

### CSS Not Loading

If Tailwind CSS is not loading properly:

1. Run `npm run build` to process CSS
2. Restart the development server
3. Check that `app/index.css` contains Tailwind directives

## Tech Stack

This template uses [Remix](https://remix.run). The following tools are also included:

- [Shopify App Remix](https://shopify.dev/docs/api/shopify-app-remix) provides authentication and methods for interacting with Shopify APIs.
- [Shopify App Bridge](https://shopify.dev/docs/apps/tools/app-bridge) allows your app to seamlessly integrate your app within Shopify's Admin.
- [Polaris React](https://polaris.shopify.com/) is a powerful design system and component library.
- [Tailwind CSS](https://tailwindcss.com/) for styling
- [Lucide React](https://lucide.dev/) for icons
- Local Storage for data persistence

## Resources

- [Remix Docs](https://remix.run/docs/en/v1)
- [Shopify App Remix](https://shopify.dev/docs/api/shopify-app-remix)
- [Introduction to Shopify apps](https://shopify.dev/docs/apps/getting-started)
- [App authentication](https://shopify.dev/docs/apps/auth)
- [Shopify CLI](https://shopify.dev/docs/apps/tools/cli)
- [Tailwind CSS](https://tailwindcss.com/docs)
- [Lucide React Icons](https://lucide.dev/)

## License

This project is licensed under the MIT License.