📱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:

1. Project ID ⚙️

2. Web API Key ⚙️

3. Client ID ⚙️

Overview step

1. Configuration: 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

2. Usage: 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

1. 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>
  );
};