Skip to content

AnishDe12020/rayauth

Repository files navigation

Banner

πŸ” Rayauth

RayAuth provide users with a non-custodial social-login enabled web-based Solana wallet along with other features like gasless transactions and session keys.

Demo

Demo Video

Features ✨

  • πŸ‘€ Social login enabled non-custodial wallet - Users don't need to install a browser extension or worry about securely storing their private keys. They can simply login with their social accounts and start using the dApp.
  • ⛽️ Gasless transactions - Users don't need to worry about buying SOL or paying for the transaction fees. The dApp pays for the transaction fees on behalf of the user.
  • πŸ”‘ Session keys - Session keys are keypairs which are approved to act as signers on the user's behalf for a limited time. It is stored locally and can be revoked at any time. This allows the dApp to sign transactions on the user's behalf without the user having to sign the transaction from the client device.

Documentation πŸ“–

Get started!

Infrastructure

React SDK

How does this work? β›“

Here are some flow charts explaining how exactly does rayauth works!

Social login

social-login

Gasless transactions

Gasless

Session Keys

session-keys

Examples πŸ’»

Authentication

This is a basic example of authentication using @rayauth/react sdk's hooks in react

import { useAuth } from "@rayauth/react"

function App() {
  const { signIn, signOut, user, isLoading, handleCallback } = useAuth();
 
  useEffect(() => {
    handleCallback();
  }, []);
 
  return (
    <div className="App">
      <button onClick={() => signIn()}> Sign In </button>
      <button onClick={() => signOut()}> Sign Out </button>
      <div>User address: {user?.address}</div>
      <div>Loading: {String(isLoading)}</div>
    </div>
  );
}
 
export default App;

Session keys

This is a basic example of using session keys using @rayauth/react sdk's hook

import { useSessionProgram } from "./hooks/useSessionProgram";
 
function MyComponent() {
  const { sessionProgram, addSessionToken, getSessionKeypair, revokeSessionToken } = useSessionProgram();
 
  const handleAddSessionToken = async () => {
    await addSessionToken();
    console.log("Session token added");
  };
 
  const handleGetSessionKeypair = () => {
    const sessionKeypair = getSessionKeypair();
    console.log("Session keypair", sessionKeypair);
  };
 
  const handleRevokeSessionToken = async () => {
    await revokeSessionToken();
    console.log("Session token revoked");
  };
 
  return (
    <div>
      <button onClick={handleAddSessionToken}>Add session token</button>
      <button onClick={handleGetSessionKeypair}>Get session keypair</button>
      <button onClick={handleRevokeSessionToken}>Revoke session token</button>
    </div>
  );
}

Running locally 🏑

git clone https://github.com/AnishDe12020/rayauth

cd rayauth

pnpm install

cd apps/server && pnpm dev
cd apps/web && pnpm dev
cd packages/react/example && pnpm dev //this is an example react-app for sdks

You need add ENV variables as followed in server directory

GITHUB_ID=
GITHUB_SECRET=
GOOGLE_ID=
GOOGLE_SECRET=
DISCORD_ID=
DISCORD_SECRET=
PRIVATE_KEY=
DATABASE_URL=
SECRET=
DB_TWO=
DB_THREE=
ELASTIC_EMAIL=

This will run the server,app and example locally on ports 8080, 3000 and 5137 respectively.

Feedback ✍🏻

If you have any feedback, please reach out to us at @Rayauthhq on twitter!

Contributing πŸ™ŒπŸ»

Contributions are always welcome!

  • Please adhere to this project's code of conduct.
  • Join our discord server
  • Open Prs!