Start connecting with Bitkub NEXT

Learn how to connect authentication with Bitkub NEXT by following our simple step.

Last updated 1 year ago

Was this helpful?

Start connecting with Bitkub NEXT

Learn how to connect authentication with Bitkub NEXT by following our simple step.

Connect your authentication process seamlessly with Bitkub NEXT using the essential key below:

⚙️
⚙️
⚙️

Overview step

Create a constant file to store your project ID, web API Key, and Client ID. The credentials are essential for establishing a secure connection with Bitkub NEXT
create an OAuth callback to handle the authentication process. This callback will enable users to login to your application using their Bitkub NEXT credentials. Implement the necessary logic to securely authenticate users and manage their session

1. Configuration

1. Create a Constant file

// Depend on your env name key 
const projectId = process.env.NEXT_PUBLIC_BITKUB_NEXT_PROJECT_ID ?? ''
const webApiKey = process.env.NEXT_PUBLIC_BITKUB_NEXT_WEB_API_KEY ?? ''
const clientId = process.env.NEXT_PUBLIC_BITKUB_NEXT_CLIENT_ID ?? ''

export {
	projectId,
	webApiKey,
	clientId
}

2. Create Context Provider file

import constants
import useBitkubNextSDK, BitkubNextSDK, OAuth2ConnectMode
Call useBitkubNextSDK with constants
Export useContext, Provider

3. Add BitkubNextSdkContextProvider as HOC of the app (Top level)

import { createContext, useContext } from 'react'
import { 
BitkubNextSDK, 
useBitkubNextSDK, 
OAuth2ConnectMode,
} from "@bitkub-blockchain/sdk-client-js"

import { projectId, webApiKey, clientId } from '../constants'

const BitkubNextSdkContext = createContext<BitkubNextSDK | null>(null);

const BitkubNextSdkContextProvider: React.FC = ({ children }) => {
    const { bitkubNextSDK } = useBitkubNextSDK(projectId, webApiKey, clientId, OAuth2ConnectMode.POPUP)

	return (
	  <BitkubNextSdkContext.Provider value={bitkubNextSDK}>
           {children}
         </BitkubNextSdkContext.Provider>
        )
}

export const useBitkubNextSdkContext = () => useContext(BitkubNextSdkContext)

export default BitkubNextSdkContextProvider

2. Usage

Create an OAuth callback page (www.yourdomain.com/oauth/callback)

Import useBitkubNextContext
Call bitkubNext.resolveCodeFromLogin with URL

import { NextPage } from "next"
import { useRouter } from "next/router"
import { useEffect } from "react"
import { useBitkubNextSdkContext } from "../../contexts/BitkubNextContext"

const Page: NextPage = () => {
  const bitkubNext = useBitkubNextSdkContext()
  const router = useRouter()

  useEffect(() => {
    if (bitkubNext && router.query && Object.keys(router.query).length > 0) {
      bitkubNext.resolveCodeFromLogin(window.location.origin)
    }
  }, [bitkubNext, router.query])

  return null;
};

export default Page;

2. Handle login

Import useBitkubNextContext
implement bitkubNext.login with redirect URL that matched BKC config

const HomePage: NextPage = () => {
  const bitkubNext = useBitkubNextSdkContext()
  const accessToken = bitkubNext?.useAccessToken() ?? ""

  const handleLogin = () => bitkubNext?.login(`${window.location.origin}/oauth/callback`)
  const handleGetInfo = () => bitkubNext?.getInfo()

  return (
    <div>
      {!accessToken ? (
        <button onClick={handleLogin}>Login</button>
      ) : (
        <button onClick={handleGetInfo}>Get User Info</button>
      )}
    </div>
  );
};