ssh-22/chat

Line-style Chat app built with Node.js and React

chat's Issues

本番環境へのリリース(サーバサイド)

サーバーサイドをwranglerに移行する

メッセージ入力後、メッセージリストの最下部にスクロールする

バーチャルキーボード表示時に範囲外をスクロールできる

PWA化

テキストエリアに文字がないときは送信ボタンを非活性化する

サーバー側にメッセージを保存する

ClouflareのDurable ObjectsかKVを使えばいけそう

本番環境へのリリース(フロント)

初期画面で最新のメッセージにスクロールする

discordに登録する

メッセージの送信時刻を表示する

E2Eテスト

done

iPhoneの画面サイズに合わせる

バーチャルキーボード表示時に送信ボタンをクリックすると送信できず、キーボードが閉じる

CI

done

iOSのGoogle ChromeとSafari、Twitter、LINEでの画面表示対応

ユーザー登録(Auth0)

Auth0を使用してGoogleログイン&サインアップ機能を実装するには、以下の手順を行います。

Auth0アカウントを作成する
Auth0のウェブサイトにアクセスし、アカウントを作成します。無料でサインアップできます。
Auth0アプリケーションを作成する
Auth0ダッシュボードから新しいアプリケーションを作成します。アプリケーションを作成する際に、使用する認証プロバイダーとしてGoogleを選択します。
Reactアプリケーションを作成する
Reactアプリケーションを作成します。必要に応じて、React用の開発環境をインストールします。
Auth0 React SDKをインストールする
npmパッケージマネージャーを使用して、Auth0 React SDKをインストールします。以下のコマンドを使用します。

npm install @auth0/auth0-react

Auth0Providerを設定する
Auth0Providerコンポーネントを使用して、認証プロバイダーの情報をReactアプリケーションに提供します。以下のコードをindex.jsに追加します。

import React from 'react';
import ReactDOM from 'react-dom';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

ReactDOM.render(
  <Auth0Provider
    domain={process.env.REACT_APP_AUTH0_DOMAIN}
    clientId={process.env.REACT_APP_AUTH0_CLIENT_ID}
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>,
  document.getElementById('root')
);

Google認証プロバイダーを設定する
Auth0ダッシュボードから、Google認証プロバイダーを設定します。Google認証プロバイダーの設定には、GoogleのAPIキーなどが必要です。
Googleログイン&サインアップボタンを追加する
Reactコンポーネントを使用して、Googleログイン&サインアップボタンを実装します。以下は、例です。

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function LoginButton() {
  const { loginWithRedirect } = useAuth0();

  return (
    <button onClick={() => loginWithRedirect()}>
      Log in with Google
    </button>
  );
}

function LogoutButton() {
  const { logout } = useAuth0();

  return (
    <button onClick={() => logout()}>
      Log out
    </button>
  );
}

function App() {
  const { isAuthenticated } = useAuth0();

  return (
    <div>
      {isAuthenticated ? <LogoutButton /> : <LoginButton />}
    </div>
  );
}

export default App;

テキストエリアの文字が小さい

logPushの設定