diff --git a/packages/frontend/src/contexts/auth.js b/packages/frontend/src/contexts/auth.js
new file mode 100644
index 0000000..7badd1d
--- /dev/null
+++ b/packages/frontend/src/contexts/auth.js
@@ -0,0 +1,51 @@
+import { createContext } from 'react'
+import { makeAutoObservable } from 'mobx'
+
+import { SERVER } from '../config'
+
+export default class Auth {
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  async join(platform) {
+    console.log('join through', platform)
+
+    // authorization through relay
+    const currentUrl = new URL(window.location.href)
+    const dest = new URL('/join', currentUrl.origin)
+
+    if (platform === 'twitter') {
+      const url = new URL('/api/oauth/twitter', SERVER)
+      url.searchParams.set('redirectDestination', dest.toString())
+      url.searchParams.set('isSigningUp', true)
+      window.location.replace(url.toString())
+    }
+    if (platform === 'github') {
+      const url = new URL('/api/oauth/github', SERVER)
+      url.searchParams.set('redirectDestination', dest.toString())
+      url.searchParams.set('isSigningUp', true)
+      window.location.replace(url.toString())
+    }
+  }
+
+  async signInWithGithub() {
+    try {
+      const res = await fetch('/api/auth/github')
+      const { url } = await res.json()
+      window.location.replace(url)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  async signInWithTwitter() {
+    try {
+      const res = await fetch('/api/auth/twitter')
+      const { url } = await res.json()
+      window.location.replace(url)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
diff --git a/packages/frontend/src/contexts/state.js b/packages/frontend/src/contexts/state.js
index 33bd4d5..ab01734 100644
--- a/packages/frontend/src/contexts/state.js
+++ b/packages/frontend/src/contexts/state.js
@@ -2,15 +2,18 @@ import { createContext } from 'react'
 import Interface from './interface'
 import User from './User'
 import Address from './address'
+import Auth from './auth'
 
 const state = {}
 
 const address = new Address(state)
+const auth = new Auth(state)
 const ui = new Interface(state)
 const user = new User(state)
 
 Object.assign(state, {
   address,
+  auth,
   ui,
   user,
 })
diff --git a/packages/frontend/src/index.jsx b/packages/frontend/src/index.jsx
index 91f995c..4191dc8 100644
--- a/packages/frontend/src/index.jsx
+++ b/packages/frontend/src/index.jsx
@@ -4,6 +4,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import Header from './pages/Header'
 import Start from './pages/Start'
 import Address from './pages/Address'
+import Auth from './pages/Auth'
 import './index.css'
 
 export default function App() {
@@ -11,7 +12,8 @@ export default function App() {
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Header />}>
-          <Route index element={<Start />} />
+          <Route index element={<Auth />} />
+          <Route path="start" element={<Start />} />
           <Route path="address" element={<Address />} />
         </Route>
       </Routes>
diff --git a/packages/frontend/src/pages/Auth.jsx b/packages/frontend/src/pages/Auth.jsx
new file mode 100644
index 0000000..fb5626d
--- /dev/null
+++ b/packages/frontend/src/pages/Auth.jsx
@@ -0,0 +1,111 @@
+import React, { useEffect, useState, useContext } from 'react'
+import { observer } from 'mobx-react-lite'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
+import Button from '../components/Button'
+
+import state from '../contexts/state'
+
+export default observer(() => {
+  const navigate = useNavigate()
+  const [params, setParams] = useSearchParams()
+
+  const { auth, user } = useContext(state)
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [errorMsg, setErrorMsg] = useState('')
+  const [idInput, setIdInput] = useState('')
+
+  const signup = async (platform, access_token) => {
+    setErrorMsg('')
+    setIsLoading(true)
+    try {
+      await user.signup(platform, access_token)
+      await user.getRep(platform)
+      return navigate('/user')
+    } catch (e) {
+      setErrorMsg(e.toString())
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    const platform = params.get('platform')
+    const access_token = params.get('access_token')
+    const signupError = params.get('signupError')
+    const isSigningUp = params.get('isSigningUp')
+    if (platform && access_token) {
+      if (isSigningUp && parseInt(isSigningUp)) {
+        signup(platform, access_token)
+      } else {
+        user.storeAccessToken(platform, access_token)
+      }
+    } else if (signupError) {
+      setErrorMsg(
+        `Sign up through ${platform.toUpperCase()} error: ${signupError}`
+      )
+    }
+    setParams('')
+  }, [])
+
+  const login = async () => {
+    try {
+      await user.login(idInput)
+      return navigate('/user')
+    } catch (e) {
+      setErrorMsg(e.toString())
+    }
+  }
+
+  const onIdInputChange = (event) => {
+    setIdInput(event.target.value)
+  }
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="join-container">
+          <Loader active inline="centered" size="huge" />
+          <Link to="/help">Any question?</Link>
+        </div>
+      ) : (
+        <div className="join-container">
+          {errorMsg.length > 0 && (
+            <Message error header="Oops!" content={errorMsg} />
+          )}
+          <Button
+            basic
+            color="blue"
+            size="huge"
+            onClick={() => auth.join('twitter')}
+          >
+            <span>Join with Twitter</span>
+          </Button>
+          <Button
+            basic
+            color="black"
+            size="huge"
+            onClick={() => auth.join('github')}
+          >
+            <span>Join with Github</span>
+          </Button>
+
+          <div>Already has account?</div>
+        </div>
+      )}
+    </>
+  )
+})
+
+{
+  /* <Form>
+            <TextArea
+              placeholder="Please enter your private key."
+              style={{ width: '300px' }}
+              onChange={onIdInputChange}
+            />
+          </Form>
+          <Button basic size="large" onClick={login}>
+            Log in
+          </Button>
+          <Link to="/help">Any question?</Link> */
+}
diff --git a/packages/relay/src/config.mjs b/packages/relay/src/config.mjs
index de0b1f0..429d211 100644
--- a/packages/relay/src/config.mjs
+++ b/packages/relay/src/config.mjs
@@ -1,18 +1,24 @@
-import { ethers } from "ethers";
-import _config from "../../../config.js";
-import { config } from "dotenv";
-config();
+import { ethers } from 'ethers'
+import _config from '../../../config.js'
+import { config } from 'dotenv'
+config()
 
 export const UNIREP_ADDRESS =
-  process.env.UNIREP_ADDRESS ?? _config.UNIREP_ADDRESS;
+  process.env.UNIREP_ADDRESS ?? _config.UNIREP_ADDRESS
 export const ADDRESS_ADDRESS =
-  process.env.ADDRESS_ADDRESS ?? _config.ADDRESS_ADDRESS;
+  process.env.ADDRESS_ADDRESS ?? _config.ADDRESS_ADDRESS
 export const ETH_PROVIDER_URL =
-  process.env.ETH_PROVIDER_URL ?? _config.ETH_PROVIDER_URL;
-export const PRIVATE_KEY = process.env.PRIVATE_KEY ?? _config.PRIVATE_KEY;
+  process.env.ETH_PROVIDER_URL ?? _config.ETH_PROVIDER_URL
+export const PRIVATE_KEY = process.env.PRIVATE_KEY ?? _config.PRIVATE_KEY
 
-export const DB_PATH = process.env.DB_PATH ?? ":memory:";
+export const DB_PATH = process.env.DB_PATH ?? ':memory:'
 
-export const provider = ETH_PROVIDER_URL.startsWith("http")
+export const provider = ETH_PROVIDER_URL.startsWith('http')
   ? new ethers.providers.JsonRpcProvider(ETH_PROVIDER_URL)
-  : new ethers.providers.WebSocketProvider(ETH_PROVIDER_URL);
+  : new ethers.providers.WebSocketProvider(ETH_PROVIDER_URL)
+
+export const TWITTER_CLIENT_ID = process.env.TWITTER_CLIENT_ID ?? ''
+export const TWITTER_REDIRECT_URI = process.env.TWITTER_REDIRECT_URI ?? ''
+export const GITHUB_CLIENT_ID = process.env.GITHUB_CLIENT_ID ?? ''
+export const GITHUB_CLIENT_SECRET = process.env.GITHUB_CLIENT_SECRET ?? ''
+export const GITHUB_REDIRECT_URI = process.env.GITHUB_REDIRECT_URI ?? ''
diff --git a/packages/relay/src/routes/auth.mjs b/packages/relay/src/routes/auth.mjs
new file mode 100644
index 0000000..58e0c46
--- /dev/null
+++ b/packages/relay/src/routes/auth.mjs
@@ -0,0 +1,263 @@
+import {
+  GITHUB_CLIENT_ID,
+  GITHUB_CLIENT_SECRET,
+  TWITTER_CLIENT_ID,
+  TWITTER_REDIRECT_URI,
+  GITHUB_REDIRECT_URI,
+} from '../config.mjs'
+import fetch from 'node-fetch'
+import crypto from 'crypto'
+
+export default ({ app, db, synchronizer }) => {
+  app.get('/api/oauth/github', async (req, res) => {
+    try {
+      await githubAuth(req, res, db)
+    } catch (e) {
+      console.log('github auth error:', e)
+      res.status(500).json({
+        message: 'Uncaught error',
+        info: e.toString(),
+      })
+    }
+  })
+  app.get('/api/oauth/github/callback', async (req, res) => {
+    try {
+      await completeGithubAuth(req, res, db)
+    } catch (e) {
+      console.log('github callback error:', e)
+      res.status(500).json({
+        message: 'Uncaught error',
+        info: e.toString(),
+      })
+    }
+  })
+  app.get('/api/oauth/twitter', async (req, res) => {
+    try {
+      await twitterAuth(req, res, db)
+    } catch (e) {
+      console.log('twitter auth error:', e)
+      res.status(500).json({
+        message: 'Uncaught error',
+        info: e.toString(),
+      })
+    }
+  })
+  app.get('/api/oauth/twitter/callback', async (req, res) => {
+    try {
+      await completeTwitterAuth(req, res, db)
+    } catch (e) {
+      console.log('twitter callback error:', e)
+      res.status(500).json({
+        message: 'Uncaught error',
+        info: e.toString(),
+      })
+    }
+  })
+}
+
+async function twitterAuth(req, res, db) {
+  const challenge = crypto.randomBytes(32).toString('hex')
+  const _state = await db.create('OAuthState', {
+    type: 'twitter',
+    data: challenge,
+    redirectDestination: req.query.redirectDestination,
+    isSigningUp: req.query.isSigningUp === 'true',
+  })
+
+  const url = new URL('https://twitter.com/i/oauth2/authorize')
+  url.searchParams.append('response_type', 'code')
+  url.searchParams.append('client_id', TWITTER_CLIENT_ID)
+  url.searchParams.append('redirect_uri', TWITTER_REDIRECT_URI)
+  url.searchParams.append('scope', 'users.read tweet.read offline.access')
+  url.searchParams.append('state', _state._id)
+  // this PKCE thing seems stupid
+  url.searchParams.append('code_challenge', challenge)
+  url.searchParams.append('code_challenge_method', 'plain')
+  res.redirect(url.toString())
+}
+
+async function completeTwitterAuth(req, res, db) {
+  const { state, code, error } = req.query
+  const _state = await db.findOne('OAuthState', {
+    where: { _id: state },
+  })
+  if (!_state) {
+    res.status(401).json({
+      error: 'Invalid state',
+    })
+    return
+  }
+  await db.delete('OAuthState', {
+    where: {
+      _id: state,
+    },
+  })
+
+  if (error) {
+    // access was denied
+    const url = new URL(_state.redirectDestination)
+    url.searchParams.append(
+      'signupError',
+      'There was a problem authenticating you'
+    )
+    url.searchParams.append('platform', 'twitter')
+    res.redirect(url.toString())
+    return
+  }
+  const args = {
+    code,
+    grant_type: 'authorization_code',
+    client_id: TWITTER_CLIENT_ID,
+    code_verifier: _state.data,
+    redirect_uri: TWITTER_REDIRECT_URI,
+  }
+  const body = Object.entries(args)
+    .map(([key, val]) => `${key}=${encodeURIComponent(val)}`)
+    .join('&')
+  const auth = await fetch('https://api.twitter.com/2/oauth2/token', {
+    method: 'POST',
+    body,
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded',
+    },
+  }).then((r) => r.json())
+  console.log(auth)
+  const user = await fetch('https://api.twitter.com/2/users/me', {
+    headers: {
+      authorization: `Bearer ${auth.access_token}`,
+    },
+  }).then((r) => r.json())
+  console.log(user)
+  if (!user.data.id) {
+    const url = new URL(_state.redirectDestination)
+    url.searchParams.append('signupError', 'Unknown problem')
+    url.searchParams.append('platform', 'twitter')
+    res.redirect(url.toString())
+    return
+  }
+  // end oauth logic
+  // generate a signup code and give it to the user
+  // prevent double signup
+  const url = new URL(_state.redirectDestination)
+  if (_state.isSigningUp) {
+    const signupId = `twitter-${user.data.id}`
+    const existingSignup = await db.findOne('SignupCode', {
+      where: {
+        signupId,
+      },
+    })
+    if (existingSignup || existingSignup?.usedAt) {
+      url.searchParams.append(
+        'signupError',
+        'You have already signed up with this account'
+      )
+      url.searchParams.append('platform', 'twitter')
+      res.redirect(url.toString())
+      return
+    }
+    await db.create('SignupCode', {
+      signupId,
+    })
+  }
+
+  // now go back to the frontend signup flow
+  url.searchParams.append('platform', 'twitter')
+  url.searchParams.append('access_token', auth.access_token)
+  url.searchParams.append('isSigningUp', _state.isSigningUp)
+  res.redirect(url.toString())
+}
+
+async function githubAuth(req, res, db) {
+  // no need to PKCE
+  const state = await db.create('OAuthState', {
+    type: 'github',
+    redirectDestination: req.query.redirectDestination,
+    isSigningUp: req.query.isSigningUp === 'true',
+  })
+  const url = new URL('https://github.com/login/oauth/authorize')
+  url.searchParams.append('client_id', GITHUB_CLIENT_ID)
+  url.searchParams.append('redirect_uri', GITHUB_REDIRECT_URI)
+  url.searchParams.append('state', state._id)
+  url.searchParams.append('allow_signup', 'false')
+  res.redirect(url.toString())
+}
+
+async function completeGithubAuth(req, res, db) {
+  const { code, state, error } = req.query
+  const _state = await db.findOne('OAuthState', {
+    where: { _id: state },
+  })
+  if (!_state) {
+    res.status(401).json({
+      error: 'Invalid state',
+    })
+    return
+  }
+  await db.delete('OAuthState', {
+    where: {
+      _id: state,
+    },
+  })
+  if (error) {
+    // access was denied
+    const url = new URL(_state.redirectDestination)
+    url.searchParams.append(
+      'signupError',
+      'There was a problem authenticating you'
+    )
+    url.searchParams.append('platform', 'github')
+    res.redirect(url.toString())
+    return
+  }
+  const url = new URL('https://github.com/login/oauth/access_token')
+  url.searchParams.append('client_id', GITHUB_CLIENT_ID)
+  url.searchParams.append('client_secret', GITHUB_CLIENT_SECRET)
+  url.searchParams.append('code', code)
+  const auth = await fetch(url.toString(), {
+    method: 'POST',
+    headers: {
+      accept: 'application/json',
+    },
+  })
+  const { access_token, scope, token_type } = await auth.json()
+  const user = await fetch('https://api.github.com/user', {
+    headers: {
+      authorization: `token ${access_token}`,
+    },
+  }).then((r) => r.json())
+  if (!user.id) {
+    const _url = new URL(_state.redirectDestination)
+    _url.searchParams.append('signupError', 'Unknown problem')
+    _url.searchParams.append('platform', 'github')
+    res.redirect(_url.toString())
+    return
+  }
+  // end oauth logic
+  const _url = new URL(_state.redirectDestination)
+  if (_state.isSigningUp) {
+    const signupId = `github-${user.id}`
+    const existingSignup = await db.findOne('SignupCode', {
+      where: {
+        signupId,
+      },
+    })
+    if (existingSignup || existingSignup?.usedAt) {
+      _url.searchParams.append(
+        'signupError',
+        'You have already signed up with this account'
+      )
+      _url.searchParams.append('platform', 'github')
+      res.redirect(_url.toString())
+      return
+    }
+    await db.create('SignupCode', {
+      signupId,
+    })
+  }
+
+  // now go back to the frontend signup flow
+  _url.searchParams.append('platform', 'github')
+  _url.searchParams.append('access_token', access_token)
+  _url.searchParams.append('isSigningUp', _state.isSigningUp)
+  res.redirect(_url.toString())
+}
diff --git a/packages/relay/src/singletons/schema.mjs b/packages/relay/src/singletons/schema.mjs
index f5eb116..9f0a8bf 100644
--- a/packages/relay/src/singletons/schema.mjs
+++ b/packages/relay/src/singletons/schema.mjs
@@ -1,6 +1,33 @@
 import { schema } from '@unirep/core'
+import { nanoid } from 'nanoid'
 
 const _schema = [
+  {
+    name: 'OAuthState',
+    rows: [
+      {
+        name: 'createdAt',
+        type: 'Int',
+        default: () => +new Date(),
+      },
+      ['type', 'String'],
+      ['redirectDestination', 'String'],
+      ['isSigningUp', 'Bool'],
+      ['data', 'String', { optional: true }],
+    ],
+  },
+  {
+    name: 'SignupCode',
+    rows: [
+      ['signupId', 'String'],
+      ['usedAt', 'Int', { optional: true }],
+      {
+        name: 'createdAt',
+        type: 'Int',
+        default: () => +new Date(),
+      },
+    ],
+  },
   {
     name: 'AccountTransaction',
     primaryKey: 'signedData',
@@ -20,4 +47,19 @@ const _schema = [
   },
 ]
 
-export default [...schema, ..._schema]
+// export default [...schema, ..._schema]
+
+export default _schema
+  .map((obj) => ({
+    ...obj,
+    primaryKey: obj.primaryKey || '_id',
+    rows: [
+      ...obj.rows,
+      {
+        name: '_id',
+        type: 'String',
+        default: () => nanoid(),
+      },
+    ],
+  }))
+  .concat(schema)