heroku

[UN5T48L3]

Hey there,
Should we replace this: https://chatkit-demo-server.herokuapp.com
with our app url?
If not, why? What is containing in this server?

[lukejacksonn]

This is just an authentication endpoint URL. You only need to change this URL if you change the Chatkit instance that the app connects to.

See here: https://github.com/pusher/react-slack-clone/blob/master/src/chatkit.js#L6

If you would like to create an instance of your own, then you can do so for free by signing up at https://dash.pusher.com/chatkit and hitting Create. After that, you can enable the test token provider and use that URL as the authentication endpoint.

Hope that helps, let me know if not!

[UN5T48L3]

Wondering how can we deploy to heroku and configure server. People has access to login via GitHub. I created my own GitHub app and replaced instead of yours. So what is next to build a brand new chat page with Chatkit?

[UN5T48L3]

Btw, I also created my chatkit app and replaced too.

[lukejacksonn]

Ok, so I am getting this question a lot.. and realise that it is not very well documented! I will try get round to formalising this in the README at some point but for now..

You have been through the correct steps essentially if you are starting from a clone of this repo.. and would like to use it as a starting point for your own app then you will have to:

1. Login to https://dash.pusher.com/chatkit and create an instance of your own
2. Replace the instanceLocator here https://github.com/pusher/react-slack-clone/blob/master/src/chatkit.js#L6 with that of your new instance (available in the dashboard).
3. Create a GitHub app and configure it for your domain, find your app ID and secret then use it in a file similar to this, which you will need to host on somewhere like heroku:

const server = require('server')
const fetch = require('node-fetch')
const Chatkit = require('pusher-chatkit-server')

const { get, post } = server.router
const { json, header, status, redirect } = server.reply

const credentials = require('./credentials.json')
const chatkit = new Chatkit.default(credentials)

const cors = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers': '*',
  'Access-Control-Allow-Methods': '*',
}

const GithubAccessTokenFromCode = code =>
  fetch('https://github.com/login/oauth/access_token', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
    body: JSON.stringify({
      client_id: <YOUR_GITHUB_APP_ID>,
      client_secret:  <YOUR_GITHUB_APP_SECRET>,
      code,
    }),
  })
    .then(res => res.json())
    .then(data => data.access_token)
    .catch(console.log)

const GithubUserFromAccessToken = token =>
  fetch(`https://api.github.com/user?access_token=${token}`)
    .then(res => res.json())
    .catch(console.log)

const ChatkitCredentialsFromGithubToken = token =>
  GithubUserFromAccessToken(token)
    .then(user =>
      chatkit.authenticate({ grant_type: 'client_credentials' }, user.login)
    )
    .catch(console.log)

const CreateChatkitUserFromGithubUser = user =>
  chatkit
    .createUser(user.login, user.name || user.login, user.avatar_url)
    .catch(console.log)

server({ port: process.env.PORT || 4000, security: { csrf: false } }, [
  ctx => header(cors),
  post('/auth', async ctx => {
    try {
      const { code } = JSON.parse(ctx.data)
      const token = await GithubAccessTokenFromCode(code)
      const user = await GithubUserFromAccessToken(token)
      const create = await CreateChatkitUserFromGithubUser(user)
      return json({ id: user.login, token })
    } catch (e) {
      console.log(e)
    }
  }),
  post('/token', async ctx => {
    try {
      const { token } = ctx.query
      const creds = await ChatkitCredentialsFromGithubToken(token)
      return json(creds)
    } catch (e) {
      console.log(e)
    }
  }),
  get('/success', async ctx => {
    const prod = 'https://pusher.github.io/chatkit-demo'
    const { code, state, url } = ctx.query
    return redirect(302, `${url || prod}?code=${code}&state=${state}`)
  }),
  get(ctx => status(404)),
])

4. Replace the token provider URL with that of your newly hosted auth endpoint here https://github.com/pusher/react-slack-clone/blob/master/src/chatkit.js#L4
5. Run the app, it should just work ™

I am very curious to see if this work and how easy people think the process is. I'd like to make it even easier.. so if anyone has any bright ideas on how we could shuffle some of the code around in order to achieve this, then I am all ears!

[shubhamdupare]

can you please explain 3rd step

[lukejacksonn]

Try read through the code! It pretty much does what it says on the tin. I believe the API might have changed a bit since I posted this but otherwise the flow still works. You will need your chatkit credentials in credentials.json and a GitHub App ID and Secret Key.