@hopae/hconnect-expo

한국어 문서

hConnect SDK for Expo applications.

Installation

npx expo install @hopae/hconnect-expo

Quick Start

Add the plugin to your app.json:

{
  "expo": {
    "plugins": [
      [
        "@hopae/hconnect-expo",
        {
          "clientId": "your-client-id"
        }
      ]
    ]
  }
}

Use in your app:

import React, { useState } from 'react';
import { Modal } from 'react-native';
import { VerificationView } from '@hopae/hconnect-expo';

function App() {
  const [showModal, setShowModal] = useState(false);

  const handleSuccess = (result) => {
    // Code-only flow (default behavior)
    console.log('Authorization code:', result.code);
    // Send code to your backend for token exchange
    setShowModal(false);
  };

  const handleError = (error) => {
    console.log('Error:', error.error);
    setShowModal(false);
  };

  return (
    <Modal visible={showModal}>
      <VerificationView
        onSuccess={handleSuccess}
        onError={handleError}
        onCancel={() => setShowModal(false)}
      />
    </Modal>
  );
}

Token Exchange Options

By default, the SDK only returns the authorization code. You have two options:

Option 1: Code-only flow (Recommended)

<VerificationView
  onSuccess={(result) => {
    // Only result.code is available
    // Send to your backend for business logic processing
    fetch('/api/signup', {
      method: 'POST',
      body: JSON.stringify({ code: result.code })
    });
  }}
/>

Option 2: Automatic token exchange with PKCE

<VerificationView
  onSuccess={(result) => {
    // result.code, result.tokenData, and result.claims available
    console.log('User claims:', result.claims);
  }}
/>

That's it! 🎉

Need Customization?

Want to customize UI colors, skip intro screens, or use different environments? Check out the advanced configuration guide.

Example

Check out the complete example:

cd example && npx expo start

Requirements

• Expo SDK 49+
• React Native 0.68+

License

MIT