Aşağıdaki bilgilerle kayıt olmayı denedim.

{
    "name": "Proto",
    "surname": "Test",
    "username": "prototurkebykdrms",
    "email": "[email protected]",
    "password": "123456"
}

Console'da şu hatayı aldım:

Access to XMLHttpRequest at 'https://socializee-backend.vercel.app/api/auth/register' from origin 'https://socializee-app.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Yani CORS hatası alıyorsun. Bu da isteği atan subdomain socializee-app iken istek atılan subdomain socializee-backend olduğu için oluyor. Localhost'ta CORS'a düşmüyor olabilirsin.
Ben bu aşamada takıldığım için cookie ile ilgili durumu gözlemleyemedim.
Bu sorunu çözmek için -backend kodunu bilemiyorum ama- kabaca aşağıdaki düzenlemeyi yapabilirsin:

const express = require('express');
const cors = require('cors');
const app = express();

// Aşağıdaki origin'den gelen isteklere izin veriyoruz:
app.use(cors({origin: 'https://socializee-app.vercel.app'}));

// ...diğer kodlar ve middleware'lar...

app.listen(80, () => {
  console.log('Sunucu çalışıyor...');
});

Üst Edit: Çok uzun bir yazı oldu. Nihai düşüncem son paragrafta. Aradakiler tamamen iç dökme :)

Flutter'da durum nedir bilmiyorum ama React Native'de zırt pırt güncelleme geliyor. Kullandığınız paketler yeni sürüme destek getirinceye kadar siz uygulamanızı -azmetmezseniz- yeni sürüme geçiremiyorsunuz. Üstelik bazı sürüm yükseltmeleri öyle temelden yapılıyor ki, native kodları da düzenleyerek eklediğiniz paketlerin yeni sürümde nasıl yer edinmesi gerektiğini çözmekle uğraşıyorsunuz. Sırf bu yüzden mümkün olduğunca -hazır paket bulunmasına rağmen- ihtiyacımı kendi bileşenimi oluşturarak gideriyorum. Bu iyi de oluyor tabi. Benim kontrolümde, sadece benim ihtiyacım olan kod kalabalığına sahip bileşenlerim oluyor. Ama işin Swift veya Kotlin/Java tarafına çok hakim olmadığım için burada da kısıtlanıyorum tabi.
Yani React Native tarafında sürekli versiyon yükseltmeleri oluyor ama 3. taraf paketler buna uyum sağlayamadığından sorunlar yaşıyorsunuz.
Bunun haricinde React Native ile kod yazmak -özellikle Typescript desteğiyle- çok keyifli.
Mobil yazmaya karar verirken hem Flutter'ı hem React Native'i başlangıç düzeyinde denemiştim. Flutter'a bir türlü ısınamamıştım. En azından o dönemde, çokça çözümleri olsa bile beni aslında bu çözümler içinde bir konfor alanı yaratıp aslında kısıtlıyor gibi hissetmiştim. Aslında felsefesi hoşuma gitmişti. Aslında çok da native bileşenlere bağımlı olmayan, oluşturulan bileşenleri ekranda kendisi resim çizer gibi çizen, aslında bütün işleri web'deki bir <canvas> üzerine çizim yapar gibi halleden bir yapı kurmuşlardı. Bence bu harika bir çözümdü ve ekrana mükemmel bir hakimiyet kurmamı sağlayacağını, gerekirse kendi yamuk yumuk görünen bileşenlerimi bile oluşturabileceğimi düşünmüştüm. Yani aslında geçmişten özlediğim Flash ve ActionScript ile uygulama geliştirir gibi uygulama geliştirebileceğim bir yapı ile karşılaşacağımı ummuştum. Ama bunun yerine, hazır bileşenleri prop'lar vasıtasıyla özelleştirebileceğim bir yapı ile karşılaştım. Başlangıçta header'ı, footer'ı, yan menüsü falan olan gelişmiş bir bileşen ile başlıyordum ve bunun üzerinde geliştirmeler yapıp özelleştiriyordum. Ama bu bana bootstrap geliştirilmiş web sitesinde css ile overload yaparak geliştirme yapar gibi hissettirdi. İşin kötüsü, okuduğum dokümanlar ve izlediğim eğitim videoları bunun harika bir özellik olduğundan, işleri çok hızlandıracağından bahsediyorlardı. Evet, başlangıç düzeyinde insanı cezbediyor hızlıca gelişmiş bir görünüm elde edebilmek. Ama beni cezbetmedi çünkü beklentilerim bambaşkaydı. Ben de bu işler böyle yürüyorsa -muhtemelen yanıldım ama- Flutter'ın bana göre olmadığına karar verdim. Bu sırada React Native ise başlangıçta bana bomboş bir ekran sunuyordu. "Zaten React biliyorsundur, al web sitesi tasarlar gibi tasarla" diyordu. Ben o sırada pek React da bilmiyordum aslında ama bu boş ekranda geliştirme yapmak bana daha çekici geldi. Bu sıralarda React Native de eski class yapısından kurtulup fonksiyonel bir yapıya dönüyordu ve yeni yapısında bileşen oluşturmak sıradan bir javascript fonksiyonu oluşturmak gibi kolaydı. Bir bileşenin stateful/stateless olup olmadığını belirtmek falan da gerekmiyordu. Bir state kullanıyorsan otomatikman stateful oluyordu. Kullanmazsan stateless devam ediyordu. Çok basit, anlaşılır ve sıfırdan özelleştirilebilir bir yapı. Evet, hayal ettiğim gibi Flash rahatlığında tasarım oluşturamam belki ama neredeyse Web rahatlığındayım. Bir index.html dosyası oluşturmuşum ve imleç ilk satırda yanıp sönüyor. Buradan nereye gidebileceğim benim hayal gücüme kalmış. Flutter'da ise gelişmiş bir html istekeleti ile başlıyorum ve bunu özelleştirip nereye gideceğim yine bana kalmış. Yani birinde bana özel bir yapı kuruyorken diğerinde ihtiyacım olabilecek her şeyi barındıran bir yapıyı bana özgü hale getirmek için çalışıyorum. Kişiden kişiye değişir tabi ama ben React Native'in sunduğu yapıyı daha esnek bulduğum için o yolu tercih ettim. Dediğim gibi muhtemelen yanılmışımdır. Sadece başlangıç düzeyinde Flutter inceledim sonuçta.

ChatGPT'ye şu prompt'u verdim: "ekrana merhaba dünya yazan bir bileşenin react native ve flutter örneklerini ver."

Flutter için şu örneği oluşturdu:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Merhaba Dünya App'),
        ),
        body: const Center(
          child: Text(
            'Merhaba Dünya',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

React Native için ise şu:

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => (
    <View style={styles.container}>
         <Text style={styles.text}>Merhaba Dünya</Text>
    </View>
);

const styles = StyleSheet.create({
  container: {flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff'},
  text: {fontSize: 20, fontWeight: 'bold'},
});

export default App;

Bu iki örneğe bakınca React Native için web'e yakın düzeyde bir tasarım esnekliğim var. Flutter'da ise elementi ortalamak için Center gibi başka bileşenler kullanmam gerekiyor. Yani ben yazının ortada değil de sağa yaslı olmasını istesem stil değiştirmek yerine bileşen değiştirmem gerekecek. Ya da adı Center olan bir bileşene, içerikleri sağa yaslı olsun diye style vermem gerekecek.
Bir de aynı iş için React Native'de kullandığım 2 bileşene karşılık Flutter'da Widget > Material App > Scaffhold > Center'ın da child prop'unu kullanarak 4 widget kullandı. Muhtemelen 1-2 widget'la da çözebilirdi aslında işi. Ama işte ChatGPT de o konfor alanında kalmayı seçti. Kodda yaratılan arrow anti-pattern durumu da -aslında böyle olmak zorunda değildi biliyorum- ama ister istemez oluşuveriyor.
Aslında bakınca Flutter'ın Center gibi bileşenler kullanması native koda yakınlık açısından çok daha doğru ve kodun native koda çevrilmesi açısından daha verimli gibi görünüyor. Ama Flutter'ın asıl felsefesi "ekrana piksel piksel çiziyorum" olduğu için bu durum bana itici geliyor. Aslında native'e uyumluluk açısından aynı şeyi React Native de yapabilirdi ama yapmamayı tercih etmişler. Böylece React Native "bırak böyle native uyumluluk gibi şeylerin hesabını ben yapayım, sen kodununun en sade haliyle işlevine odaklan" diyerek gönülümü almış oldu. Tabi dediğim gibi, belki 2 hafta daha Flutter'ın üzerine gitsem bu düşüncelerimin tamamen yanlış olduğu kanısına varırdım. Ama işte iletişimde ilk temasın önemi. :) Ben kendi adıma C# dilinin keskinliği ve Visual Studio'nun yüzlerce imkânı ile web sitesi geliştirmek yerine PHP'nin veya Node.js'in esnekliği ve Visual Studio Code'un rahatlığında web sitesi geliştirmeyi tercih ediyorum. Evet, güvenlik için belki daha çok çaba gerektiriyor. Belki performans için kodu daha dikkatli yazmam gerekiyor. Ama beni kalıplardan uzak tutuyor. PHP'de bile bir framework kullanırken Laravel yerine Codeigniter kullanmayı tercih ederdim. Çünkü Laravel'in aksine Codeigniter'da PHP özgürlüğünü hissedebiliyorsunuz. Bu tamamen yazılımcının tercih meselesi. Zaten Codeigniter da gitgide Laravel'e benzemeye başlayınca PHP'den de uzaklaşmaya başladım. Şu sıralar Node.js'çiyim diyebilirim. :) Bir de sırf makine öğrenmesi veya derin öğrenme üzerine merakım olduğundan ufak ufak Python çalışmalarım oluyor ama profesyonel anlamda web tarafında React, mobil tarafta React Native ile para kazanıyorum.
Bana sorarsan web tarafında da React yerine Svelte kullanmak çok daha heyecan verici. Ama işte Svelte'in de geliştiricisi az olduğundan pek hızlı gelişemiyor. Hatta x = x; gibi garip kodlar yazmak gerekebiliyor ki bu benim için göz kanatan bir kod. :D Ve Svelte de bu gibi durumların önüne geçmek için günden güne React'a benzemeye başlıyor gibi bir izlenim uyandı bende.
Eskiden harika bir Flash'ımız ve ActionScript'imiz vardı. Google'ın başını çektiği bir çok firma el birliğiyle Adobe'nin bu projesini güvenlik açıkları nedeniyle durdurdular. Tarayıcılarda Flash uygulamalarını engellediler. Zamanla Flash geliştiricileri web'den el çekmek zorunda kaldı. Mobil'de Flash'la halen -özellikle oyun alanında- harika işler ortaya çıkarılabiliyordu. Şu an orada son durumu bilmiyorum ama orada da sanırım Microsoft'un Unity projesi -ki çok beğenirim kendisini- baskın geldi. Ben Google'dan Adobe'ye karşı bu tutumunun üzerine ondan daha iyisini Flutter ile başaracağını ummuştum ama umduğumu bulamadım. Flutter ile yazmak -temelde- React Native ile yazmaktan çok da farklı değildi. Birinin Component dediğine biri Widget diyordu. Flutter'da hayal ettiğim tasarım ortamını bulamadım. Hal böyleyken, yukarıda da bahsettiğim nedenlerle Flutter yerine React Native'i tercih ettim.
Aslında aklımın bir köşesinde Flutter için hep bir "acaba" var ama az önce ChatGPT'nin örneğinde gördüğüm extends StatelessWidget ifadesi halen orada olduğu için bu acaba'yı yine ertelemek istedim mesela. React Native bu ifadeden (extends React.Component) kurtulalı yıllar oldu. Ayrıca nesne tabanlı kod geliştirmek iyidir hoştur ama gerekli gereksiz her yerde nesne tabanlı kod yazmayı da doğru bulmuyorum. React Native de böyle düşünmüş olacak ki -zaten Javascript'e pek uygun da olmadığından- başlangıçta nesne tabanlı gitmesine rağmen sonradan fonksiyonel tabanlı bir yapıya döndüler. Ben de tam bu dönüş sırasında mobile geçiş yaptığımdan React Native beni yakalamış oldu.

Özetle, Flutter'ı pek bilmediğim için karşılaştırma yapamayacağım. Ama React Native'den, yükseltme problemleri hariç, memnunum. Kod yazarken keyif alıyorum.

Sorun bunlardan mı kaynaklanıyor bilmiyorum ama deneyebilirsin:

toolbar.js dosyasını kullanıyorsan event.preventDefault(); kodları silebilirsin.
toolbar.min.js dosyasını kullanıyorsan a.preventDefault() yazan yerleri undefined olarak değiştirebilirsin.

toolbar'a basılınca gerçekleşecek olayları kontrol etmek için kullanıcının yaptığı diğer tıklama olaylarını geçersiz kılıyor. Belki link'lere tıklama olayları bu yüzden geçersiz kalıyordur.

console.dir(parseveri, {depth:null});

Kaynak: https://stackoverflow.com/a/71735674/10337747

O uygulamanın algoritmasını bilmeden buna cevap veremeyiz.

Eğer uygulama kullanmayı zorunlu tutuyorlarsa sanırım
bildirim yoluyla gönderiyorlar otp kodunu. Bu bildirimi
alabilmen için o uygulamayı kullanmak zorundasın çünkü
bildirimi gönderen sistem (belki firebase) doğrudan
o uygulamaya yönlendirilmiştir.

Eğer otp kodu sms yoluyla geliyorsa belki tarayıcıyı
mobil uygulama gibi gösterip login ekranını görüntülemek
mümkün olabilir ama yine o sitenin kurgusunu bilmek lazım.

Eğer otp kodunu web sitesinde gösteriyor ve uygulamanın
login ekranında web sayfasındaki kodu yazmanı istiyorsa
belki de web tarafında hiç login sayfası yoktur veya
o uygulamadan gönderilen bazı şifreli bilgiler olmadan
web'deki login ekranına erişim engellenmiştir. Bu durumda
yine yazacağın mobil uygulamayla o ekranı görüntülemen
mümkün olmaz.

Türlü hack denemeleri yapılabilir ama yapmamak gerek.
Belli ki her hesabın sadece 1 kullanıcısı olsun istiyorlar.
Böylece, giriş yapmak isteyen kişi kimse zaten telefonu da
yanındadır ve kendi hesabına kolayca giriş yapabilir.
Aksi halde sanırım en uygun yol 1 kullanıcının birkaç farklı
hesaba tek uygulama üzerinden girebilmesi için ilgili
firmayla iletişime geçip geliştirme yapmaları istenebilir.

Muhtemelen bu tahminlerimin hiçbiri tutmadı. Sitenin
kurgusunu tahmin ederek bir yanıt vermem mümkün değil.
Ama soruna yanıt olarak, kendi uygulamanı yazman bu sorununu
çözmeyecektir çünkü uygulama ile sunucu muhakkak
o uygulamaya özgü ve değişken bir şifreleme ile
haberleşiliyordur. Sen türlü yazılımlar kullanarak o
uygulamadan sunucuya atılan istekleri görüp aynı istekleri
kendi uygulamandan sunucuya atamazsın. Çünkü o isteklerde
muhakkak uygulama içindeki verileri de içeren bir token
bulunuyordur. Sen sunucuya header değişiklikleri ile
kendini o uygulama gibi gösterip token'ı da isteğe
eklediğinde, yine de güvenlik önlemine takılacaksın.
Çünkü token, uygulama içinde şifreleniyor ve bu şifrenin
nasıl açılacağını sadece uygulama ve sunucu biliyor. Haliyle
bu token'ı taklit etmen mümkün değil.

Tabi sistemde böyle güvenlik önlemleri almamış da olabilirler.
Belki de PostMan üzerinden header değişiklikleriyle yapacağın
basit bir login isteğine yanıt verecektir, kim bilir...

Çok ucu açık bir soru. Aslında ne yapacağın çok belli. Veritabanına eklediğin kişi sayısı 100'e ulaşmışsa yeni kişi kaydetmeyeceksin. Kullanıcılara da tablonda kaç kişinin kayıtlı olduğunu göstereceksin. Anlık bir gösterim için websocket veya socket.io gibi bir yapı kullanman gerekir ama basit xhr/ajax istekleriyle de işi kotarabilirsin.
Soruyu sorarken cevabı zaten vermişsin yani. O yüzden tam olarak ne sorduğunu anlayamadım sanırım. Doğrudan kod yazmamızı istiyor olabilir misin?

https://github.com/cinder92/react-native-get-music-files