import { auth } from '@/auth'
import { redirect } from 'next/navigation'

export default async function HomePage() {
const session = await auth()

if (!session) {
  redirect('/auth/signin')
}

return (
  <div className="container mx-auto p-8">
    <h1>Welcome to Ring Platform</h1>
    <p>Hello, {session.user?.name}!</p>
  </div>
)
}

Environment Setup

.env.local Firebase Configuration OAuth Providers

terminal

bash

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

📱 Basic Components

User Profile Component

// components/UserProfile.tsx

TypeScript

typescript

import { useSession } from 'next-auth/react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

export function UserProfile() {
const { data: session } = useSession()

if (!session) return null

return (
  <div className="flex items-center space-x-4">
    <Avatar>
      <AvatarImage src={session.user?.image || ''} />
      <AvatarFallback>
        {session.user?.name?.charAt(0) || 'U'}
      </AvatarFallback>
    </Avatar>
    <div>
      <p className="font-medium">{session.user?.name}</p>
      <p className="text-sm text-gray-500">{session.user?.email}</p>
    </div>
  </div>
)
}

Entity List Component

// components/EntityList.tsx

TypeScript

typescript

'use client'

import { useEffect, useState } from 'react'

interface Entity {
id: string
name: string
type: string
description: string
}

export function EntityList() {
const [entities, setEntities] = useState<Entity[]>([])
const [loading, setLoading] = useState(true)

useEffect(() => {
  async function fetchEntities() {
    try {
      const response = await fetch('/api/entities')
      const data = await response.json()
      setEntities(data.entities || [])
    } catch (error) {
      console.error('Failed to fetch entities:', error)
    } finally {
      setLoading(false)
    }
  }

  fetchEntities()
}, [])

if (loading) {
  return <div>Loading entities...</div>
}

return (
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {entities.map((entity) => (
      <div key={entity.id} className="border rounded-lg p-4 bg-white shadow-sm">
        <h3 className="font-semibold text-lg mb-2">{entity.name}</h3>
        <p className="text-sm text-gray-600 mb-2">{entity.type}</p>
        <p className="text-gray-700">{entity.description}</p>
      </div>
    ))}
  </div>
)
}

🔐 Authentication Examples

Magic Link Authentication

// app/auth/signin/page.tsx

TypeScript

typescript

'use client'

import { signIn } from 'next-auth/react'
import { useState } from 'react'

export default function SignIn() {
const [email, setEmail] = useState('')
const [loading, setLoading] = useState(false)

const handleMagicLink = async (e: React.FormEvent) => {
  e.preventDefault()
  setLoading(true)
  
  try {
    await signIn('email', { 
      email,
      callbackUrl: '/dashboard'
    })
  } catch (error) {
    console.error('Sign in failed:', error)
  } finally {
    setLoading(false)
  }
}

return (
  <div className="max-w-md mx-auto mt-8">
    <form onSubmit={handleMagicLink} className="space-y-4">
      <input
        type="email"
        placeholder="Enter your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="w-full p-3 border rounded-lg"
        required
      />
      <button
        type="submit"
        disabled={loading}
        className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 disabled:opacity-50"
      >
        {loading ? 'Sending...' : 'Send Magic Link'}
      </button>
    </form>
  </div>
)
}

🌐 API Integration

Basic API Call

// lib/api.ts

TypeScript

typescript

export async function createEntity(data: {
name: string
type: string
description: string
}) {
const response = await fetch('/api/entities', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})

if (!response.ok) {
  throw new Error('Failed to create entity')
}

return response.json()
}

// Usage in component
const handleCreateEntity = async () => {
try {
  const entity = await createEntity({
    name: 'My Company',
    type: 'technology',
    description: 'Building the future'
  })
  console.log('Entity created:', entity)
} catch (error) {
  console.error('Error:', error)
}
}

💰 Web3 Integration

Wallet Connection

// components/WalletConnect.tsx

TypeScript

typescript

'use client'

import { useEffect, useState } from 'react'

export function WalletConnect() {
const [wallet, setWallet] = useState<string | null>(null)
const [loading, setLoading] = useState(false)

const connectWallet = async () => {
  setLoading(true)
  try {
    const response = await fetch('/api/wallet/create', {
      method: 'POST',
    })
    const data = await response.json()
    setWallet(data.address)
  } catch (error) {
    console.error('Failed to connect wallet:', error)
  } finally {
    setLoading(false)
  }
}

return (
  <div className="p-4 border rounded-lg">
    {wallet ? (
      <div>
        <p className="text-sm text-gray-600">Wallet Connected:</p>
        <p className="font-mono text-sm">{wallet}</p>
      </div>
    ) : (
      <button
        onClick={connectWallet}
        disabled={loading}
        className="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 disabled:opacity-50"
      >
        {loading ? 'Connecting...' : 'Connect Wallet'}
      </button>
    )}
  </div>
)
}

🎯 Next Steps

Authentication Examples - Explore advanced auth patterns
API Integration - Deep dive into API usage
Web3 Integration - Advanced blockchain features
Real World Apps - Complete application examples

Need help? Join our Discord Community or check the API Documentation.

Завантаження документації...

Підготовка контенту платформи Ring

Documentation

Getting Started

Architecture

Architecture Overview

Features

Security & Compliance

Token Staking

Performance

API Reference

CLI Tool

Ring CLI

Customization

Customization Overview

Deployment

Development

Examples

Third-party Integrations

Advanced Features

Real-world Use Cases

White Label

Quick Links

AI Self-Construct

Platform Concepts

Get Started

Deployment Calculator

Offline

v1.48•Trinity

Privacy|Contact

Quick Start Examples

Get up and running with Ring Platform in minutes with these practical examples.

🚀 5-Minute Setup

Basic Ring Platform Integration

// app/page.tsx

TypeScript

typescript

import { auth } from '@/auth'
import { redirect } from 'next/navigation'

export default async function HomePage() {
const session = await auth()

if (!session) {
  redirect('/auth/signin')
}

return (
  <div className="container mx-auto p-8">
    <h1>Welcome to Ring Platform</h1>
    <p>Hello, {session.user?.name}!</p>
  </div>
)
}

Environment Setup

.env.local Firebase Configuration OAuth Providers

terminal

bash

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

📱 Basic Components

User Profile Component

// components/UserProfile.tsx

TypeScript

typescript

import { useSession } from 'next-auth/react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

export function UserProfile() {
const { data: session } = useSession()

if (!session) return null

return (
  <div className="flex items-center space-x-4">
    <Avatar>
      <AvatarImage src={session.user?.image || ''} />
      <AvatarFallback>
        {session.user?.name?.charAt(0) || 'U'}
      </AvatarFallback>
    </Avatar>
    <div>
      <p className="font-medium">{session.user?.name}</p>
      <p className="text-sm text-gray-500">{session.user?.email}</p>
    </div>
  </div>
)
}

Entity List Component

// components/EntityList.tsx

TypeScript

typescript

'use client'

import { useEffect, useState } from 'react'

interface Entity {
id: string
name: string
type: string
description: string
}

export function EntityList() {
const [entities, setEntities] = useState<Entity[]>([])
const [loading, setLoading] = useState(true)

useEffect(() => {
  async function fetchEntities() {
    try {
      const response = await fetch('/api/entities')
      const data = await response.json()
      setEntities(data.entities || [])
    } catch (error) {
      console.error('Failed to fetch entities:', error)
    } finally {
      setLoading(false)
    }
  }

  fetchEntities()
}, [])

if (loading) {
  return <div>Loading entities...</div>
}

return (
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {entities.map((entity) => (
      <div key={entity.id} className="border rounded-lg p-4 bg-white shadow-sm">
        <h3 className="font-semibold text-lg mb-2">{entity.name}</h3>
        <p className="text-sm text-gray-600 mb-2">{entity.type}</p>
        <p className="text-gray-700">{entity.description}</p>
      </div>
    ))}
  </div>
)
}

🔐 Authentication Examples

Magic Link Authentication

// app/auth/signin/page.tsx

TypeScript

typescript

'use client'

import { signIn } from 'next-auth/react'
import { useState } from 'react'

export default function SignIn() {
const [email, setEmail] = useState('')
const [loading, setLoading] = useState(false)

const handleMagicLink = async (e: React.FormEvent) => {
  e.preventDefault()
  setLoading(true)
  
  try {
    await signIn('email', { 
      email,
      callbackUrl: '/dashboard'
    })
  } catch (error) {
    console.error('Sign in failed:', error)
  } finally {
    setLoading(false)
  }
}

return (
  <div className="max-w-md mx-auto mt-8">
    <form onSubmit={handleMagicLink} className="space-y-4">
      <input
        type="email"
        placeholder="Enter your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="w-full p-3 border rounded-lg"
        required
      />
      <button
        type="submit"
        disabled={loading}
        className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 disabled:opacity-50"
      >
        {loading ? 'Sending...' : 'Send Magic Link'}
      </button>
    </form>
  </div>
)
}

🌐 API Integration

Basic API Call

// lib/api.ts

TypeScript

typescript

export async function createEntity(data: {
name: string
type: string
description: string
}) {
const response = await fetch('/api/entities', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})

if (!response.ok) {
  throw new Error('Failed to create entity')
}

return response.json()
}

// Usage in component
const handleCreateEntity = async () => {
try {
  const entity = await createEntity({
    name: 'My Company',
    type: 'technology',
    description: 'Building the future'
  })
  console.log('Entity created:', entity)
} catch (error) {
  console.error('Error:', error)
}
}

💰 Web3 Integration

Wallet Connection

// components/WalletConnect.tsx

TypeScript

typescript

'use client'

import { useEffect, useState } from 'react'

export function WalletConnect() {
const [wallet, setWallet] = useState<string | null>(null)
const [loading, setLoading] = useState(false)

const connectWallet = async () => {
  setLoading(true)
  try {
    const response = await fetch('/api/wallet/create', {
      method: 'POST',
    })
    const data = await response.json()
    setWallet(data.address)
  } catch (error) {
    console.error('Failed to connect wallet:', error)
  } finally {
    setLoading(false)
  }
}

return (
  <div className="p-4 border rounded-lg">
    {wallet ? (
      <div>
        <p className="text-sm text-gray-600">Wallet Connected:</p>
        <p className="font-mono text-sm">{wallet}</p>
      </div>
    ) : (
      <button
        onClick={connectWallet}
        disabled={loading}
        className="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 disabled:opacity-50"
      >
        {loading ? 'Connecting...' : 'Connect Wallet'}
      </button>
    )}
  </div>
)
}

🎯 Next Steps

Authentication Examples - Explore advanced auth patterns
API Integration - Deep dive into API usage
Web3 Integration - Advanced blockchain features
Real World Apps - Complete application examples

Need help? Join our Discord Community or check the API Documentation.

Завантаження документації...

Підготовка контенту платформи Ring

Documentation

Getting Started

Architecture

Architecture Overview

Features

Security & Compliance

Token Staking

Performance

API Reference

CLI Tool

Ring CLI

Customization

Customization Overview

Deployment

Development

Examples

Third-party Integrations

Advanced Features

Real-world Use Cases

White Label

Quick Links

Quick Start Examples

Get up and running with Ring Platform in minutes with these practical examples.

🚀 5-Minute Setup

Basic Ring Platform Integration

// app/page.tsx

TypeScript

typescript

import { auth } from '@/auth'
import { redirect } from 'next/navigation'

export default async function HomePage() {
const session = await auth()

if (!session) {
  redirect('/auth/signin')
}

return (
  <div className="container mx-auto p-8">
    <h1>Welcome to Ring Platform</h1>
    <p>Hello, {session.user?.name}!</p>
  </div>
)
}

Environment Setup

.env.local Firebase Configuration OAuth Providers

terminal

bash

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key

NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret

📱 Basic Components

User Profile Component

// components/UserProfile.tsx

TypeScript

typescript

import { useSession } from 'next-auth/react'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

export function UserProfile() {
const { data: session } = useSession()

if (!session) return null

return (
  <div className="flex items-center space-x-4">
    <Avatar>
      <AvatarImage src={session.user?.image || ''} />
      <AvatarFallback>
        {session.user?.name?.charAt(0) || 'U'}
      </AvatarFallback>
    </Avatar>
    <div>
      <p className="font-medium">{session.user?.name}</p>
      <p className="text-sm text-gray-500">{session.user?.email}</p>
    </div>
  </div>
)
}

Entity List Component

// components/EntityList.tsx

TypeScript

typescript

'use client'

import { useEffect, useState } from 'react'

interface Entity {
id: string
name: string
type: string
description: string
}

export function EntityList() {
const [entities, setEntities] = useState<Entity[]>([])
const [loading, setLoading] = useState(true)

useEffect(() => {
  async function fetchEntities() {
    try {
      const response = await fetch('/api/entities')
      const data = await response.json()
      setEntities(data.entities || [])
    } catch (error) {
      console.error('Failed to fetch entities:', error)
    } finally {
      setLoading(false)
    }
  }

  fetchEntities()
}, [])

if (loading) {
  return <div>Loading entities...</div>
}

return (
  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {entities.map((entity) => (
      <div key={entity.id} className="border rounded-lg p-4 bg-white shadow-sm">
        <h3 className="font-semibold text-lg mb-2">{entity.name}</h3>
        <p className="text-sm text-gray-600 mb-2">{entity.type}</p>
        <p className="text-gray-700">{entity.description}</p>
      </div>
    ))}
  </div>
)
}

🔐 Authentication Examples

Magic Link Authentication

// app/auth/signin/page.tsx

TypeScript

typescript

'use client'

import { signIn } from 'next-auth/react'
import { useState } from 'react'

export default function SignIn() {
const [email, setEmail] = useState('')
const [loading, setLoading] = useState(false)

const handleMagicLink = async (e: React.FormEvent) => {
  e.preventDefault()
  setLoading(true)
  
  try {
    await signIn('email', { 
      email,
      callbackUrl: '/dashboard'
    })
  } catch (error) {
    console.error('Sign in failed:', error)
  } finally {
    setLoading(false)
  }
}

return (
  <div className="max-w-md mx-auto mt-8">
    <form onSubmit={handleMagicLink} className="space-y-4">
      <input
        type="email"
        placeholder="Enter your email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        className="w-full p-3 border rounded-lg"
        required
      />
      <button
        type="submit"
        disabled={loading}
        className="w-full bg-blue-600 text-white p-3 rounded-lg hover:bg-blue-700 disabled:opacity-50"
      >
        {loading ? 'Sending...' : 'Send Magic Link'}
      </button>
    </form>
  </div>
)
}

🌐 API Integration

Basic API Call

// lib/api.ts

TypeScript

typescript

export async function createEntity(data: {
name: string
type: string
description: string
}) {
const response = await fetch('/api/entities', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})

if (!response.ok) {
  throw new Error('Failed to create entity')
}

return response.json()
}

// Usage in component
const handleCreateEntity = async () => {
try {
  const entity = await createEntity({
    name: 'My Company',
    type: 'technology',
    description: 'Building the future'
  })
  console.log('Entity created:', entity)
} catch (error) {
  console.error('Error:', error)
}
}

💰 Web3 Integration

Wallet Connection

// components/WalletConnect.tsx

TypeScript

typescript

'use client'

import { useEffect, useState } from 'react'

export function WalletConnect() {
const [wallet, setWallet] = useState<string | null>(null)
const [loading, setLoading] = useState(false)

const connectWallet = async () => {
  setLoading(true)
  try {
    const response = await fetch('/api/wallet/create', {
      method: 'POST',
    })
    const data = await response.json()
    setWallet(data.address)
  } catch (error) {
    console.error('Failed to connect wallet:', error)
  } finally {
    setLoading(false)
  }
}

return (
  <div className="p-4 border rounded-lg">
    {wallet ? (
      <div>
        <p className="text-sm text-gray-600">Wallet Connected:</p>
        <p className="font-mono text-sm">{wallet}</p>
      </div>
    ) : (
      <button
        onClick={connectWallet}
        disabled={loading}
        className="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 disabled:opacity-50"
      >
        {loading ? 'Connecting...' : 'Connect Wallet'}
      </button>
    )}
  </div>
)
}