composer require weswecan/nfc
 
php artisan native:plugin:register weswecan/nfc

{
    "imports": {
        "#nfc": {
            "types": "./vendor/weswecan/nfc/resources/js/dist/index.d.ts",
            "default": "./vendor/weswecan/nfc/resources/js/dist/index.js"
        }
    }
}

import { nfc, NfcEvent, NfcErrorCode, NfcTagType } from '#nfc';
 
// Check if NFC is available
const status = await nfc.isAvailable();
 
if (status.available && status.enabled) {
    // Write URL to NFC tag
    await nfc.writeUrl('https://example.com');
 
    // Or read from NFC tag
    await nfc.read();
} else if (status.available && !status.enabled) {
    // Open settings to enable NFC (Android only — see platform notes)
    await nfc.openSettings();
}
 
// Listen for successful write
nfc.on(NfcEvent.UrlWritten, (data) => {
    console.log('URL written:', data.url);
});
 
// Listen for tag read with tag info
nfc.on(NfcEvent.TagRead, (data) => {
    console.log('Content:', data.content);
    console.log('Type:', data.type);
    if (data.tagInfo) {
        console.log('Capacity:', data.tagInfo.capacity, 'bytes');
        console.log('Writable:', data.tagInfo.isWritable);
    }
});
 
// Listen for errors
nfc.on(NfcEvent.Error, async (data) => {
    if (data.code === NfcErrorCode.NfcDisabled) {
        await nfc.openSettings(); // Android only
    }
});

use Nativephp\Nfc\Facades\Nfc;
 
$status = Nfc::isAvailable();
 
if ($status->available && $status->enabled) {
    Nfc::writeUrl('https://example.com');
}

// Check platform
const platform = nfc.getPlatform();
// { isIos: true, isAndroid: false, isMobile: true }
 
// Convenience methods
if (nfc.isAndroid()) {
    // Use timeout option
}
 
if (nfc.isIos()) {
    // Use alertMessage option
}

const status = await nfc.isAvailable();
// { available: true, enabled: true, status: 'enabled', message: '...' }

// Basic usage
await nfc.writeUrl('https://example.com');
 
// With session options (platform-specific)
await nfc.writeUrl('https://example.com', {
    timeout: 15,           // Android only
    alertMessage: 'Tap the NFC tag',   // iOS only
    successMessage: 'URL saved!'       // iOS only
});

// Basic usage
await nfc.writeText('Hello World');
 
// With language code
await nfc.writeText('Bonjour le monde', 'fr');
 
// With session options
await nfc.writeText('Hello', 'en', { timeout: 20 });

// Write a URI
await nfc.writeRecord({ type: 'uri', uri: 'https://example.com' });
 
// Write text with language
await nfc.writeRecord({ type: 'text', text: 'Hello', languageCode: 'en' });
 
// Write a vCard contact
await nfc.writeRecord({
    type: 'vcard',
    vcard: {
        firstName: 'John',
        lastName: 'Doe',
        phone: '+1234567890',
        email: '[email protected]',
        organization: 'Acme Corp',
        title: 'Developer',
        url: 'https://example.com'
    }
});
 
// Write JSON data via MIME
await nfc.writeRecord({
    type: 'mime',
    mimeType: 'application/json',
    data: JSON.stringify({ userId: 123, action: 'checkin' })
});
 
// Write Android Application Record (Android only)
await nfc.writeRecord({ type: 'aar', packageName: 'com.example.myapp' });

// Write URL + AAR combo (standard Android NFC deployment pattern)
await nfc.writeUrlWithAar('https://example.com', 'com.example.myapp');
 
// With session options
await nfc.writeUrlWithAar('https://example.com', 'com.example.myapp', {
    timeout: 15,
    alertMessage: 'Tap the NFC tag'
});

// Erase a tag
await nfc.erase();
 
// With session options
await nfc.erase({ alertMessage: 'Tap the tag to erase' });
 
// Listen for success
nfc.on(NfcEvent.TagErased, (data) => {
    console.log('Tag erased!', data.tagId);
});

// Basic usage
await nfc.read();
 
// With session options
await nfc.read({
    timeout: 30,
    alertMessage: 'Hold near product tag',
    keepSessionActive: true  // Read multiple tags in one session
});
 
// Handle the result
nfc.on(NfcEvent.TagRead, (data) => {
    console.log('Content:', data.content);
    console.log('Type:', data.type);  // url, text, vcard, empty, aar, mime type string, etc.
    console.log('Tag ID:', data.tagId);  // Android only — empty string on iOS
 
    // Tag hardware information
    if (data.tagInfo) {
        console.log('Capacity:', data.tagInfo.capacity, 'bytes');
        console.log('Used:', data.tagInfo.usedSize, 'bytes');
        console.log('Writable:', data.tagInfo.isWritable);
        console.log('Technologies:', data.tagInfo.technologies);
        console.log('Can lock:', data.tagInfo.canMakeReadOnly);
    }
});

await nfc.cancel();

// Android only — check if NFC is disabled and prompt the user
const status = await nfc.isAvailable();
if (nfc.isAndroid() && status.available && !status.enabled) {
    await nfc.openSettings();
}

// Write WiFi config (WPA2 by default)
await nfc.writeWifiConfig('MyNetwork', 'MyPassword');
 
// Specify security type
await nfc.writeWifiConfig('MyNetwork', 'MyPassword', 'WPA2');
 
// Open network (no password)
await nfc.writeWifiConfig('GuestWifi', '', 'OPEN');
 
// Supported security types: 'WPA2', 'WPA', 'WEP', 'OPEN'

interface NfcSessionOptions {
    /** Timeout in seconds (default: 30, set to 0 for no timeout) */
    timeout?: number;
 
    /** Custom message shown during NFC prompt */
    alertMessage?: string;
 
    /** Message after success (iOS only) */
    successMessage?: string;
 
    /** Keep session active after first tag (iOS and Android) */
    keepSessionActive?: boolean;
}

await nfc.read({ keepSessionActive: true });
 
// Each tag fires a separate TagRead event
nfc.on(NfcEvent.TagRead, (data) => {
    console.log('Scanned:', data.content);
});
 
// Call cancel() when done
await nfc.cancel();

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { nfc, NfcEvent, NfcErrorCode, type NfcTagReadPayload } from '#nfc';
 
const isAvailable = ref(false);
const isEnabled = ref(false);
const isScanning = ref(false);
const result = ref<NfcTagReadPayload | null>(null);
const error = ref<string | null>(null);
 
onMounted(async () => {
    const status = await nfc.isAvailable();
    isAvailable.value = status.available;
    isEnabled.value = status.enabled;
});
 
const cleanupRead = nfc.on(NfcEvent.TagRead, (data) => {
    result.value = data;
    isScanning.value = false;
});
 
const cleanupError = nfc.on(NfcEvent.Error, (data) => {
    error.value = `${data.code}: ${data.message}`;
    isScanning.value = false;
 
    if (data.code === NfcErrorCode.NfcDisabled && nfc.isAndroid()) {
        nfc.openSettings();
    }
});
 
const cleanupCancel = nfc.on(NfcEvent.Cancelled, () => {
    isScanning.value = false;
});
 
onUnmounted(() => {
    cleanupRead();
    cleanupError();
    cleanupCancel();
});
 
async function scan() {
    error.value = null;
    result.value = null;
    isScanning.value = true;
    await nfc.read({ alertMessage: 'Hold near NFC tag' });
}
 
async function writeUrl(url: string) {
    error.value = null;
    isScanning.value = true;
    await nfc.writeUrl(url, { alertMessage: 'Tap tag to write URL' });
}
</script>
 
<template>
    <div v-if="!isAvailable">
        <p>NFC is not supported on this device.</p>
    </div>
    <div v-else-if="!isEnabled">
        <p>NFC is disabled.</p>
        <button @click="nfc.openSettings()">Open NFC Settings</button>
    </div>
    <div v-else>
        <button @click="scan" :disabled="isScanning">
            {{ isScanning ? 'Scanning...' : 'Scan NFC Tag' }}
        </button>
        <button @click="writeUrl('https://example.com')" :disabled="isScanning">
            Write URL
        </button>
 
        <div v-if="result">
            <p>Content: {{ result.content }}</p>
            <p>Type: {{ result.type }}</p>
            <p v-if="result.tagInfo">
                Capacity: {{ result.tagInfo.capacity }} bytes
                ({{ result.tagInfo.isWritable ? 'writable' : 'read-only' }})
            </p>
        </div>
 
        <p v-if="error" style="color: red;">{{ error }}</p>
    </div>
</template>

import { useState, useEffect, useCallback } from 'react';
import { nfc, NfcEvent, NfcErrorCode, type NfcTagReadPayload } from '#nfc';
 
export default function NfcScanner() {
    const [isAvailable, setIsAvailable] = useState(false);
    const [isEnabled, setIsEnabled] = useState(false);
    const [isScanning, setIsScanning] = useState(false);
    const [result, setResult] = useState<NfcTagReadPayload | null>(null);
    const [error, setError] = useState<string | null>(null);
 
    useEffect(() => {
        nfc.isAvailable().then((status) => {
            setIsAvailable(status.available);
            setIsEnabled(status.enabled);
        });
 
        const cleanupRead = nfc.on(NfcEvent.TagRead, (data) => {
            setResult(data);
            setIsScanning(false);
        });
 
        const cleanupError = nfc.on(NfcEvent.Error, (data) => {
            setError(`${data.code}: ${data.message}`);
            setIsScanning(false);
 
            if (data.code === NfcErrorCode.NfcDisabled && nfc.isAndroid()) {
                nfc.openSettings();
            }
        });
 
        const cleanupCancel = nfc.on(NfcEvent.Cancelled, () => {
            setIsScanning(false);
        });
 
        return () => {
            cleanupRead();
            cleanupError();
            cleanupCancel();
        };
    }, []);
 
    const scan = useCallback(async () => {
        setError(null);
        setResult(null);
        setIsScanning(true);
        await nfc.read({ alertMessage: 'Hold near NFC tag' });
    }, []);
 
    const writeUrl = useCallback(async (url: string) => {
        setError(null);
        setIsScanning(true);
        await nfc.writeUrl(url, { alertMessage: 'Tap tag to write URL' });
    }, []);
 
    if (!isAvailable) {
        return <p>NFC is not supported on this device.</p>;
    }
 
    if (!isEnabled) {
        return (
            <div>
                <p>NFC is disabled.</p>
                <button onClick={() => nfc.openSettings()}>Open NFC Settings</button>
            </div>
        );
    }
 
    return (
        <div>
            <button onClick={scan} disabled={isScanning}>
                {isScanning ? 'Scanning...' : 'Scan NFC Tag'}
            </button>
            <button onClick={() => writeUrl('https://example.com')} disabled={isScanning}>
                Write URL
            </button>
 
            {result && (
                <div>
                    <p>Content: {result.content}</p>
                    <p>Type: {result.type}</p>
                    {result.tagInfo && (
                        <p>
                            Capacity: {result.tagInfo.capacity} bytes
                            ({result.tagInfo.isWritable ? 'writable' : 'read-only'})
                        </p>
                    )}
                </div>
            )}
 
            {error && <p style={{ color: 'red' }}>{error}</p>}
        </div>
    );
}

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
use Native\Mobile\Attributes\OnNative;
use Nativephp\Nfc\Facades\Nfc;
use Nativephp\Nfc\Events\NfcTagRead;
use Nativephp\Nfc\Events\NfcUrlWritten;
use Nativephp\Nfc\Events\NfcTextWritten;
use Nativephp\Nfc\Events\NfcRecordWritten;
use Nativephp\Nfc\Events\NfcTagErased;
use Nativephp\Nfc\Events\NfcError;
use Nativephp\Nfc\Events\NfcCancelled;
 
class NfcScanner extends Component
{
    public ?string $content = null;
    public ?string $type = null;
    public ?array $tagInfo = null;
    public ?string $error = null;
    public bool $isScanning = false;
 
    public function scan(): void
    {
        $this->reset('content', 'type', 'tagInfo', 'error');
        $this->isScanning = true;
        Nfc::read(['alertMessage' => 'Hold near NFC tag']);
    }
 
    public function writeUrl(string $url): void
    {
        $this->reset('error');
        $this->isScanning = true;
        Nfc::writeUrl($url, ['alertMessage' => 'Tap tag to write URL']);
    }
 
    #[OnNative(NfcTagRead::class)]
    public function handleTagRead(string $content, string $type, ?string $tagId = null, ?array $tagInfo = null): void
    {
        $this->content = $content;
        $this->type = $type;
        $this->tagInfo = $tagInfo;
        $this->isScanning = false;
    }
 
    #[OnNative(NfcUrlWritten::class)]
    public function handleUrlWritten(string $url, ?string $tagId = null): void
    {
        $this->content = $url;
        $this->type = 'url';
        $this->isScanning = false;
    }
 
    #[OnNative(NfcTextWritten::class)]
    public function handleTextWritten(string $text, string $languageCode, ?string $tagId = null): void
    {
        $this->content = $text;
        $this->isScanning = false;
    }
 
    #[OnNative(NfcRecordWritten::class)]
    public function handleRecordWritten(string $recordType, ?string $tagId = null): void
    {
        $this->type = $recordType;
        $this->isScanning = false;
    }
 
    #[OnNative(NfcTagErased::class)]
    public function handleTagErased(?string $tagId = null): void
    {
        $this->content = null;
        $this->type = null;
        $this->isScanning = false;
    }
 
    #[OnNative(NfcError::class)]
    public function handleNfcError(string $code, string $message): void
    {
        $this->error = "{$code}: {$message}";
        $this->isScanning = false;
    }
 
    #[OnNative(NfcCancelled::class)]
    public function handleNfcCancelled(string $reason = 'user_cancelled'): void
    {
        $this->isScanning = false;
    }
 
    public function render()
    {
        return view('livewire.nfc-scanner');
    }
}

<div>
    <button wire:click="scan" @disabled($isScanning)>
        {{ $isScanning ? 'Scanning...' : 'Scan NFC Tag' }}
    </button>
    <button wire:click="writeUrl('https://example.com')" @disabled($isScanning)>
        Write URL
    </button>
 
    @if ($content)
        <p>Content: {{ $content }}</p>
        <p>Type: {{ $type }}</p>
        @if ($tagInfo)
            <p>
                Capacity: {{ $tagInfo['capacity'] }} bytes
                ({{ $tagInfo['isWritable'] ? 'writable' : 'read-only' }})
            </p>
        @endif
    @endif
 
    @if ($error)
        <p style="color: red;">{{ $error }}</p>
    @endif
</div>